axios配置

介绍

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

axios的一些特性

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

安装

npm install axios -S

并在src下新建http文件夹，在http下新建一个index.js文件

• axios创建实例

const instanceUntil = axios.create({
  baseURL: '接口文档',
  timeout: 3000,
});

• 拦截器

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    // 从本地获取token值
    let Token = JSON.parse(window.localStorage.getItem("token"))
    config.headers.Authorization=Token;
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

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

• 封装get方法

export function fetch(URL,params={}){
  return new Promise((resolve,reject) => {
    axios.get(URL,{
      params:params
    })
    .then(response => {
      resolve(response.data);
    })
    .catch(err => {
      reject(err)
    })
  })
}

• post方法的封装

 export function post(URL,data = {}){
   return new Promise((resolve,reject) => {
     axios.post(URL,data)
          .then(response => {
            resolve(response.data);
          },err => {
            reject(err)
          })
   })
 }

• 导出实例

export  default instanceUntil

在main.js引入axios即可使用。

import axios from ('@/http/index.js')
Vue.prototype.$axios = axios