Axios 是一個基于 promise 的 HTTP 庫
我會把axios的封裝寫在工具類的文件里面
以下是初始的axios封裝迟杂，以后應(yīng)該會根據(jù)情況來改變

import axios from 'axios'
import store from '@/store'
import { Message } from 'element-ui'
import {getCookie} from '@/utils/cookie'
const CancelToken = axios.CancelToken
var cancel;
var service=axios.create({
    baseURL:process.env.BASE_API,
    timeout:5000
})
 //添加請求攔截器
 service.interceptors.request.use(function(config){
    if(store.getters.token){
        config.headers['TOKEN']=getCookie('TOKEN')
    }
    return config
},function(error){
    return Promise.reject(error)
})
//添加響應(yīng)攔截器
service.interceptors.response.use(function(response){
   /**
   * 下面的注釋為通過在response里，自定義code來標(biāo)示請求狀態(tài)
   * 當(dāng)code返回如下情況則說明權(quán)限有問題蹭越，登出并返回到登錄頁
   * 如想通過xmlhttprequest來狀態(tài)碼標(biāo)識 邏輯可寫在下面error中
   */
  // response => {
  //   const res = response.data
  //   if (res.code !== 20000) {
  //     })
  //     // 50008:非法的token; 50012:其他客戶端登錄了;  50014:Token 過期了;
  //     if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
  //       }).then(() => {
  //         })
  //       })
  //     }
  //     return Promise.reject('error')
  //   } else {
  //     return response.data
  //   }
  // },
    return response
},function(error){
    console.log('err'+error)
    Message({
        Message:error.message,
        type:'error',
        duration:5*1000 
    })
    return Promise.reject(error)
}
)
export default{
    //get請求
    get(url,param){
        //promise示例
        //   axios.post('/user', {
        //     firstName: 'Fred',
        //     lastName: 'Flintstone'
        //   })
        //   .then(function (response) {
        //     console.log(response);
        //   })
        //   .catch(function (error) {
        //     console.log(error);
        //   }); 
        return new Promise((resolve,reject)=>{
            service({
                method:'get',
                url,
                params:param,
                cancelToken:new CancelToken(c=>{
                    cancel=c
                })
            }).then(res=>{  //axios返回的是一個promise對象
                resolve(res)  //resolve在promise執(zhí)行器內(nèi)部 
            }).catch(err=>{
                console.log(err,'異常')
            })

        })
    },
    //post請求
    post(url,param){
        return new Promise((resolve,reject)=>{
            service({
                method:'post',
                url,
                data:param,
                cancelToken:new CancelToken(c=>{
                    cancel=c
                })
            }).then(res=>{
                resolve(res)
            }).catch(err=>{
                console.log(err,'異常')
            })
        })
    }
}
// export default service

api.js

一般會在項目里把API請求單獨出來寫火欧，所以在api.js文件里面的請求方式是這樣的

import req from '@/utils/axios.js'
// export 的另一種寫法
// export const getToken=(username,password)=>{    
// }
const getToken=(username,password)=>{
      return req.post('/login/login',{username,password})    
    //
}
export{getToken}

store

涉及到異步操作時在store的actions里面進行請求

actions:{
  async gettoken({commit,state},userinfo){
            try{
              var token=await getToken(userinfo.name,userinfo.password)
                  commit('GETUSERINFO',token.data.token) 
                  setCookie('TOKEN',token.data.token)
            }catch(err){
                console.log(err)
            }
        },
}