vue中的axios+promise封装Api接口

（以下内容属于个人的实战笔记，主要是为了记录知识，如果有什么错误请提出，以便我及时做出更改，避免误人子弟）
一般搭建项目前，都会先把项目需要的api接口先封装号，然后共享到全局上

第一步：

一般先在src目录下创建个工具文件夹（utils），然后再该文件夹创建一个api的js文件，如下图：

第二步：

在api.js里面引入axios

import axios from 'axios';

第三步：

编写请求拦截器/响应拦截器
1、请求拦截器

//请求拦截器
axios.interceptors.request.use(config => {
    //如果存在token,请求携带token
    if (window.sessionStorage.getItem('tokenStr')) {
        config.headers['Authorization'] = window.sessionStorage.getItem('tokenStr');
    }
    return config;
}, error => {
    console.log('error!');
})

2、响应拦截器

//响应拦截器
axios.interceptors.response.use(success => {
    if (success.status && success.status == 200) {
        if (success.data.code == 500 || success.data.code == 401 || success.data.code == 403) {
        	//Message引用了elementUI的提醒组件
            Message.error({message:success.data.message});
            return;
        }
        if (success.data.message) {
            Message.success({message:success.data.message})
        }
    }
    return success.data;//此处必须返回值，不然接下去的程序无法正常进行
},error => {
    if (error.response.code == 504 || error.response.code == 404) {
        Message.error({message:'服务器被吃了( ╯□╰ )！'});
    } else if (error.response.code == 403) {
        Message.error({message:'权限不足，请联系管理员！'});
    } else if(error.response.code == 401 ){
        Message.error({message:'尚未登陆，请登录'});
        router.replace('/');
    } else {
        if (error.response.data.message) {
            Message.error({message:error.response.data.message});
        } else {
            Message.error({message:'未知错误！'});
        }
    }
    return; 
});

第四步：

封装请求方法
使用ES6模块化export导出import导入
在ES6前， 前端就使用RequireJS或者seaJS实现模块化， requireJS是基于AMD规范的模块化库， 而像seaJS是基于CMD规范的模块化库， 两者都是为了为了推广前端模块化的工具，现在ES6自带了模块化，不过现代浏览器对模块(module)支持程度不同， 需要使用babelJS， 或者Traceur把ES6代码转化为兼容ES5版本的js代码;
1、get方法

//统一url的前缀
let base = '';
// 传送json格式的get请求
export const getRequest = (url, params) => {
  return axios({
    method: 'get',
    url: `${base}${url}`,
    data: params
  })
}

2、post方法

// 传送json格式的post请求
export const postRequest = (url, params) => {
  return axios({
    method: 'post',
    url: `${base}${url}`,
    data: params
  })
}

3、put方法

// 传送json格式的put请求
export const putRequest = (url, params) => {
  return axios({
    method: 'put',
    url: `${base}${url}`,
    data: params
  })
}

4、delete方法
// 传送json格式的delete请求

export const deleteRequest = (url, params) => {
  return axios({
    method: 'delete',
    url: `${base}${url}`,
    data: params
  })
}

第五步：

在main.js中引入js

import {postRequest} from "./utils/api"
import {putRequest} from "./utils/api"
import {getRequest} from "./utils/api"
import {deleteRequest} from "./utils/api"

Vue.prototype.postRequest = postRequest
Vue.prototype.putRequest = putRequest
Vue.prototype.getRequest = getRequest
Vue.prototype.deleteRequest = deleteRequest

第六步：

配置跨域请求，在config文件夹下面的index.js 配置 ，如图：

配置内容如下：

//target是你想要跨域的地址
proxyTable: {
      '/': {
        target: 'http://localhost:8081',
        changeOrigin: true,
        pathRewrite: {
          '^/': ''
        }
      }
    },

如图所示：

第七步：

编写对应的请求：
1、get请求：

//get请求要携带参数应在接口地址后面加?再编写参数的字段与值
this.getRequest('/tast/?currentPage='+this.currentPage+'&size='+this.size).then(resp =>{
        if(resp){
          console.log(resp)
        }
      })

2、post请求：

//post请求要携带参数，直接把参数当做postRequest方法的第二个参数传入
//（注意：这里请求是json格式的，所以需要把参数放在一个对象中传入）
 this.postRequest('/tast/',{
            "address": address,
          }).then(resp =>{
          if(resp){
              console.log(resp)
        }
      })

3、put请求：

//put请求要携带参数，直接把参数当做putRequest方法的第二个参数传入
//（注意：这里请求是json格式的，所以需要把参数放在一个对象中传入）
this.putRequest('/tast/',{
        "id":_this.tastInfo.id,
        "receiveId":_this.userId,
        "status":2
      }).then(resp =>{
        if(resp){
        console.log(resp)            
        }
      })

4、delete请求：

//delete请求要携带参数，直接把参数添加在url后
this.deleteRequest('/tast/'+data.id).then(resp =>{
        if(resp){
          console.log(resp) 
        }
      })