axios封装和使用

Axios 是一个基于 promise 的 HTTP 库
我会把axios的封装写在工具类的文件里面
以下是初始的axios封装,以后应该会根据情况来改变

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)
})
//添加响应拦截器
service.interceptors.response.use(function(response){
   /**
   * 下面的注释为通过在response里,自定义code来标示请求状态
   * 当code返回如下情况则说明权限有问题,登出并返回到登录页
   * 如想通过xmlhttprequest来状态码标识 逻辑可写在下面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执行器内部 
            }).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)
            }
        },
}

推荐阅读更多精彩内容

  • ## 框架和库的区别?> 框架(framework):一套完整的软件设计架构和**解决方案**。> > 库(lib...
    Rui_bdad阅读 1,694评论 1 4
  • 本文将开始详细分析如何搭建一个React应用架构。 一. 前言 现在已经有很多脚手架工具,如create-reac...
    字节跳动技术团队阅读 2,543评论 1 22
  • 觉察到头脑特别喜欢往外看,习惯性的喜欢去关注外在的幻像世界,而不爱安住与内在中心,总会去看看有没有什么要去...
    大道至简01灵阅读 66评论 0 2
  • 1,爱情就是,没有什么新颖的剧情,也能让你感动。 2.是不是每个女孩突然变漂亮后的就会被喜欢? 3.为什么每个老大...
    凡人凡心阅读 119评论 0 0
  • 身边像我一样热衷于工作的女性朋友不算多,每次生病难受的时候,坐到办公桌旁才能有如沐春风感,曾经我立志于为祖国的社会...
    VickyZhen阅读 48评论 0 0