vue-cli的項目中關於axios的全局配置

1. 使用easy-mock.com來模擬數據接口

2. npm install axios 安裝

3.新建目錄

其中的http.js 裏面是對axios請求接口的前期參數配置與後期數據的處理，直接上代碼

import axios from 'axios' const instance = axios.create({ headers: { 'content-type': 'application/json;charset=UTF-8', 'token': 'one' }, baseURL: 'https://easy-mock.com/mock/5c01e1f6f221b94c907213d6/', timeout: 10000, withCredentials: true }) // 添加請求攔截器
instance.interceptors.request.use(config => { // 在發送請求以前作某事，好比說 設置token
    config.headers['token'] = 'token'; return config; }, error => { // 請求錯誤時作些事
    return Promise.reject(error); }); // 添加響應攔截器
instance.interceptors.response.use(response => { // 對響應數據作些事
    if (response.status === 200) { console.log(response) if (response.data && response.data.data.code === 1) { console.log('成功') response.data.data.value = '我是返回成功' // 在請求成功後能夠對返回的數據進行處理，再返回到前臺
        } else { console.log('返回到登陸...') } } return response; }, error => { return Promise.reject(error.response.data); // 返回接口返回的錯誤信息
}) export default instance;

index.js中就是對請求方法的簡單封裝，能夠根據本身的需求來進行調整，代碼以下

import axios from './http'

var depot = {} depot.get = function ({ url, config = {}, cb }) { axios.get(url, config).then((res) => { if (res.status === 200) { let result = res.data; cb(result); } }).catch((error) => { console.log('請求錯誤：' + error); }); }; depot.post = function ({ url, data, cb }) { axios.post(url, data).then( (res) => { if (res.status === 200) { if (res.status === 200) { let result = res.data; cb(result); } } }).catch((error) => { console.log(error); }); }; export default () => { window.depot = depot; };

4. 在main.js中進行配置

5. 頁面中的使用

　　depot.get({ url: 'demo/demo', data: {}, cb: (res)=> { console.log(res) } })

這樣一個簡單的axios的全局封裝就弄好了