对于Axios的封装

封装axios

• 首先安装axios

npm install axios

• 根目录创建config文件夹
• config/index
• 下面代码中的两个变量用来判断是生产环境还是开发环境，而使用不同的地址

export default {
    config:{
        dev:'http://localhost:5000/api',
        pro:'http://localhost:3000/v3'
    }
}

二次封装

• 根目录创建api文件夹
• /api/index.js
• 通过process.env.NODE_ENV来判断是开发环境还是生产环境
• NODE_ENV是一个用户自定义的变量，在webpack中它的用途是判断生产环境或开发环境。可参考NODE_ENV
• development：在vue-cli-service serve下，即开发环境使用
• production：在vue-cli-service build和vue-cli-service test:e2e下，即正式环境使用
• test： 在vue-cli-service test:unit下使用

import config from '../config'
import axios from 'axios'
// http://www.axios-js.com/zh-cn/docs/#axios-config
// 判断是开发环境还是生产环境
const baseURL = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro
// 可以使用自定义配置新建一个 axios 实例
const http = axios.create({
  baseURL: baseURL
  // timeout: 1000,
  // headers: {'X-Custom-Header': 'foobar'}
})
// 添加请求拦截器
http.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  if (localStorage.token) { //发请求前判断本地是否有token,如果有，携带请求头过去
    config.headers.Authorization = localStorage.token;
  }
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
http.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response;
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
});
export default http

使用示例

// http:为axios的实例，请求返回的是promise
/* get请求示例 地址为http://localhost:5000/api/user?id=1*/
http.get('/user?id=1').then(res=>{})
http.get('/user',{params:{id:1}})
/* post请求示例 */
http.post('/user',{id:2,name:'zs'})
/* 执行多个并发请求示例 */
function getUserAccount(){
    return http.get('/user?id=1').then(res=>{})
}
function getUserPermissions(){
    return http.post('/user',{id:2,name:'zs'})
}
http.all([getUserAccount(), getUserPermissions()]).then(http.spread(function (acct, perms) {
    // 两个请求现在都执行完成
}));
/* http发送get请求 */
http('/user/12345');
http({
    url: '/user/12345',
    method: 'get',
    params: {
        firstName: 'Fred',
        lastName: 'Flintstone'
    }
});
/* http发送post请求 */
http({
    url: '/user/12345',
    method: 'post',
    data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
    }
})

配置项

• 这些是创建请求时可以用的配置选项。只有 url 是必需的。如果没有指定 method，请求将默认使用 get 方法。具体可参考 官方文档

// config
{
  // 请求的服务器 URL
  url: '/user',
  //请求时使用的方法
  method: 'get', // default
  // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
  // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
  baseURL: 'https://some-domain.com/api/',
  // `headers` 是即将被发送的自定义请求头
  headers: {'X-Requested-With': 'XMLHttpRequest'},
  // `params` 是即将与请求一起发送的 URL 参数
  params: {
    ID: 12345
  },
  // `data` 是作为请求主体被发送的数据
  // 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
  data: {
    firstName: 'Fred'
  },
  // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
  // 如果请求话费了超过 `timeout` 的时间，请求将被中断
  timeout: 1000,
   // `maxContentLength` 定义允许的响应内容的最大尺寸
  maxContentLength: 2000,
  // `validateStatus` 定义对于给定的HTTP 响应状态码是 resolve 或 reject  promise 。如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`)，promise 将被 resolve; 否则，promise 将被 rejecte
  validateStatus: function (status) {
    return status >= 200 && status < 300; // default
  },
  // 'proxy' 定义代理服务器的主机名称和端口
  // `auth` 表示 HTTP 基础验证应当用于连接代理，并提供凭据
  // 这将会设置一个 `Proxy-Authorization` 头，覆写掉已有的通过使用 `header` 设置的自定义 `Proxy-Authorization` 头。
  proxy: {
    host: '127.0.0.1',
    port: 9000,
    auth: {
      username: 'mikeymike',
      password: 'rapunz3l'
    }
  }
}

配置默认值

全局的 axios 默认值

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

自定义实例默认值

const instance = axios.create({
  baseURL: 'https://api.example.com'
});
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

配置的优先顺序

局部配置 > 实例配置 > 全局配置