vue中Axios的封装和API接口的管理

一、介绍
大家都知道，在Jquery中，我们使用的是它封装的$ajax来与后端交互数据,在vue框架中而推荐的是axios,Axios是一个基于Promise（ES6中用于处理异步的）的HTTP库，用于浏览器和node.js中(http://www.axios-js.com/zh-cn/docs/)。

1.浏览器中创建XMLHttpRequests
2.从node.js中创建http请求
3.支持Promise API
4.拦截请求和响应
5.转换请求数据和响应数据
6.取消请求
7.自动转换JSON数据
8.客户端支持防御XSRF

二、安装

npm install axios; 
yarn add axios;

三、基本用法
在项目中一般会创建一个request.js文件，通过创建一个axios实例，来封装请求，主要运用拦截器做统一处理
1.请求拦截器：会在这里处理request，比如配置token写入头信息中。
2.返回拦截器：会在这里处理response，对http状态码做统一处理。
注意：axios默认为json格式，如果采用form格式需要单独引入qs包

//首先我们来创建一个Axios实例
var axiosIns = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-product': 'h5'}
});

// 请求拦截器（伪代码）
service.interceptors.request.use(config => {
  const { userToken } = store.state
  if (userToken) {
    config.headers.Authorization = `Bearer ${userToken.token}` 
  }
  return config
}, error => {
  Promise.reject(error)
})

//设置response拦截器（伪代码）
service.interceptors.response.use(
  response => {
    return response
  },
  async err => {
    switch (err.response.status) {
      case 400:
        err.message = '不支持的参数(400)'
        break
      case 401: {
        let { userToken } = store.state
        if (!userToken || !userToken.token) {
          return router.replace({
            path: '/login',
            query: {
              // currentRoute：表示当前路由
              redireact: router.currentRoute.fullPath
            }
          })
        }
        break
      case 404:
        err.message = '被访问资源不存在(404)'
        break
      case 500:
        err.message = '服务端内部错误(500)'
        break
    }
    Toast.fail(err.message)
    return Promise.reject(err)
  }
)

四、项目中api管理

脑补一下后台给出的文档，如果后台不傻的话给出的文档肯定分模块的，假设后台给出的文档分为了以下几个模块，例如
资讯模块
问答模块
专栏模块
讲堂模块
圈子模块
发现模块
个人信息模块
用户登录注册模块
...还有其他很多
一般来说，网站的首页都是复杂的，会用到很多其他页面也会用到api，所以接口统一管理可以做到api的复用，这样也便于api的维护，在src目录下创建一个apis文件夹，然后根据项目大小按照模块划分api

五、项目中跨域
1.Vue-cli3 搭建Vue 项目，创建出的项目和以往的有了很多的变化，目录及命令有也是。尤其是config文件夹已经没有了。而项目中最简单都需要开发环境(dev)和线上环境(pro)

那么我以往中需要在config中文件一些生产环境，或者跨域处理现在得自己在根目录下创建了。 在开发环境中一般要处理跨域
1 创建普通全局变量 .env
2 创建开发环境变量 .env.development
3 创建生产环境变量 .env.production
(1) vue-cli3的devServer
跨域请求devServer代理几种配置
1：先在项目的根目录下新建 vue.config.js 文件
2：在module.exports内设置devServer来处理代理

module.exports = {
  devServer: {
    proxy: {
      '/v1': {
        target: 'http://192.168.1.33:9888', // 目标地址
        changeOrigin: true, //是否跨域
        ws: true,
        //重写路径  需要设置重写的话，要在后面的调用接口前加上/v1 来代替target
        pathRewrite:{
          // '^/v1': '',
        }
      // 可配置多个，如果路径有多个的话
      // '/v2': {
      //  target: 'http://192.168.1.33:9888', // 目标地址
      //  changeOrigin: true, //是否跨域
      //  ws: true,
        //重写路径  需要设置重写的话，要在后面的调用接口前加上/v2 来代替target
      //  pathRewrite:{
          // '^/v2': '',
      //  }
      }
    }
  }
}

如果项目用的是axios，则在axios中配置，只要将baseURL配置为空字符串''，参考链接： 代理跨域

axios.create({ baseURL:'' })
如果axios的baseURL配置为'/v1'， 那么需要在proxy中重写路径， 否则不能跨域

pathRewrite:{
  '^/v1': '',
}
如果想要代理所有路径，那么可以在proxy中配置（将'/v1'改为'/）：

proxy: {
  '/': { // '/'匹配所有路径，所有请求都会被代理
    target: 'http://192.168.1.33:9888',
    changeOrigin: true,
    ws: true
  }
}

3：后端开启cors跨域，配置header头信息，开启白名单

// 允许跨域访问的域名：若有端口需写全（协议+域名+端口），若没有端口末尾不用加'/'
response.setHeader("Access-Control-Allow-Origin", "http://www.domain1.com"); 

// 允许前端带认证cookie：启用此项后，上面的域名不能为'*'，必须指定具体的域名，否则浏览器会提示
response.setHeader("Access-Control-Allow-Credentials", "true"); 

// 提示OPTIONS预检时，后端需要设置的两个常用自定义头
response.setHeader("Access-Control-Allow-Headers", "Content-Type,X-Requested-With");