vue 封裝axios請求

最近接手新的vue專案，發現axios竟然沒有封裝，立馬動手封裝，這裡記錄一下完整的封裝過程，廢話不說，直接上**

baseconfig.js檔案

//存放各個伺服器的位址

// const express = require('express')
const proenv = require('./pro.env') // 生產環境配置檔案，這裡給出乙個示例，其他都相似
const uatenv = require('./uat.env') // 測試環境
const devenv = require('./dev.env') // 本地環境
const env = process.env.node_env;
console.log("env",env)
let target = '';
if (env === 'development') else if (env === 'production') else 
// module.exports = target
export default target;

// 生產環境

const hosturl = ''
module.exports =

import axios from 'axios'

import from "qs";
// 引入上述檔案
import target from "../config/baseconfig.js";
/** 封裝axios 2020.4.7 --by lhg
*/const codemessage = ;
const getfullurl = (url) => 
let newurl = target + url;
return newurl;
}//todo：暫時不了解返回資料結構，可根據自己專案的返回資料格式進行編寫 2020.4.7
// const checkstatus = response => , 1000);
// // });
// // }
// // return response;
// // }
// const errortext = codemessage[response.status] || response.statustext;
// const error = new error(errortext);
// error.name = response.status;
// error.response = response;
// throw error;
// };
/** * 執行 post 請求, 請求體為 json
* @param requestconfig 請求引數
* ,* headers: {}, // headers
* timeout: 15000, //超時時長,單位毫秒
* config:
* }*/export function postjson(requestconfig) ,
};// alert(json.stringify(options));
return request(options);
}/**
* 執行 post from表單 請求, 請求方式為 form 表單提交
* @param requestconfig 請求引數
* */
export function postform(requestconfig) ,
url: getfullurl(requestconfig.url),
};return request(options);
}/**
* 執行 get 請求
* @param requestconfig 請求引數
* */
export function get(requestconfig) ,
params: requestconfig.params,
url: getfullurl(requestconfig.url),
// timeout: requestconfig.timeout || 15000
};return request(options);
}/**
* requests a url, returning a promise.
* * @param [option] the options we want to pass to "axios.request"
* @return an object containing either "data" or "err"
*/export function request(option) ;
const defaultoptions = ;
const newoptions = ;
return (
axios
.request(newoptions)
// .then(checkstatus)
.then(response => ).then(response => ).catch(error => else if (error.request) else 
console.log("error.config = ", error.config);
}));
}

在src/api下面統一管理介面，可根據不同的元件建立資料夾

//測試axios封裝

export function test_axios()

},url: "/api/center/login"

})}在元件中呼叫

測試

vue封裝axios請求

新建檔案src utils request.js import axios from axios 自定義配置建立axios的新例項 const service axios.create 無論請求為何種型別，在params中的屬性都會以key value的格式在urlzhong拼 headers 請求...

Vue封裝axios請求

為了方便呼叫api介面，我們封裝axios請求 並在api資料夾中建立兩個兩個js檔案 http.js api.js http.js檔案中寫入 import axios from axios axios.defaults.baseurl axios.defaults.timeout 1000000 ...

Vue全域性封裝axios請求

一 簡介 使用vue開發專案時，資料請求不再使用原生的ajax來請求資料，vue官方庫提供的vue resource已經不再更新和維護，現在新專案基本都以axios作為主要請求方式 二 使用 本例以post單例請求為例 axios then res catch err 三 封裝axios 分析 ax...