vue封装axios

axios是vue基于promise对ajax的⼀种封装。

功能特点 :

1. 在浏览器中发送 XMLHttpRequests 请求

2. 在 node.js 中发送 http 请求

3. ⽀持 Promise API

4. 拦截请求和响应

5. 转换请求和响应数据

在使⽤ axios 之前，需要在 Vue-CLI 中先去安装它

npm install axios --save

在要使⽤的组件中直接引⼊调⽤即可

import axios from 'axios'

axios 的基本使⽤

//使⽤默认⽅式发送⽆参请求
import axios from "axios";
axios({
 url: 'https://api.muxiaoguo.cn/api/lishijr'
}).then(res => {
 console.log(res)
})
//默认使⽤get⽅式进⾏请求

axios的响应结构

//与jquery中的ajax不同的是，axios会对返回结果进⾏封装，将其封装为如
下结构：
{
 data:{}, //后台返回的数据
 status:200, //状态码
 statusText: 'OK', //状态信息
 headers:{}, //服务器头部信息
 config:{}, //axios对request的配置
 request:{} //request对象
}

axios 的拦截器

axios 给我们提供了两⼤类拦截器

⼀种是请求⽅向的拦截（成功请求，失败请求）

另⼀种是响应⽅向的（成功响应，失败响应）

拦截器的作⽤：⽤于我们在⽹络请求的时候在发起请求或者响应时对操

作进⾏相应的处理

//请求⽅向拦截器
import axios from "axios";
// 拦截器
axios.interceptors.request.use(config => {
 // 可以在请求拦截器⾥做什么呢？
 // 1.当⽤户发送⽹络请求的时候 在⻚⾯中添加⼀个loading组件 作为动
画
 // 2.⽤户登录的时候 判断⽤户是否有token 有的话就跳转到界⾯ 没有
的话就返回到登录界⾯或提示报错
 // 等等。。。
 console.log('进⼊请求拦截器')
 console.log(config)
 return config //记得return，放⾏请求
},err => {
 console.log('请求⽅向失败')
 console.log(err)
})
axios.get('https://api.muxiaoguo.cn/api/lishijr').then(res
=> {
 console.log(res)
})
//响应⽅向拦截器
import axios from "axios";
axios.interceptors.response.use(config => {
 //可以在响应拦截器⾥做什么呢？
 //可以拿到请求响应的状态码 根据状态码去做⼀些判断
 console.log('状态码', config.data.status);
 console.log('进⼊响应拦截器')
 return config.data //只会返回data
},err => {
 console.log('响应⽅向失败')

我们可以对axios再次封装，通过async 和 await 调用封装的方法

axios.js

import axios from 'axios'
import router from '../router/index'
import Vue from 'vue';
import { Toast } from 'vant';
import qs from 'qs'

Vue.use(Toast);

let token = '';
// 1. 基础路径

axios.defaults.baseURL = ''

axios.defaults.headers.post['Content-Type'] = 'application/json';//配置请求头

// http request拦截器 添加一个请求拦截器
// axios.interceptors.request.use(function (config) {
//   let token = localStorage.getItem("token")
//   if (token) {
//     //将token放到请求头发送给服务器,将token放在请求头中
//     config.headers['Authorization'] = token
//   }
//   return config;
// }, function (error) {
//   Toast.fail('请求超时');
//   // Do something with request error
//   return Promise.reject(error);
// });

// // 添加一个响应拦截器
// axios.interceptors.response.use(function (response) {
//   // if (response.data && response.data.code) {
//   //   if (response.data.message === 'token失效' || response.data.message === '请求头中没有token') {
//   //     //未登录
//   //     Toast.fail("登录信息已失效，请重新登录");
//   //     router.push('/login');
//   //   }
//   //   if (parseInt(response.data.code) === -1) {
//   //     Toast.fail("请求失败");
//   //   }
//   // }
//   return response;
// }, function (error) {
//   Toast.fail("服务器连接失败");
//   return Promise.reject(error);
// })

/**
  get方式请求
*/
export function get(baseURL,url, params) {
  axios.defaults.baseURL = baseURL
  return axios({
    method: 'get',
    url,
    params, // get 请求时带的参数
    timeout: 50000
  })
}

/**
 * 提交post请求 发送的数据为查询字符串，key=val&key=val
*/
export function post(baseURL,url, data) {
  axios.defaults.baseURL = baseURL
  return axios({
    method: "post",
    url,
    data: qs.stringify(data),
    timeout: 5000,
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  })
}

/**
 * 提交post请求 ,查询字符串，对象中嵌套数组的格式
*/
export function post_obj_array(baseURL,url, data) {
  axios.defaults.baseURL = baseURL
  return axios({
    method: "post",
    url,
    data: qs.stringify(data, { allowDots: true }),
    timeout: 5000
  })
}

/**
 * 提交post请求 发送的数据为查询字符串，当参数为数组的时候适用该方法
 * ids=1&ids=2
*/
export function post_array(baseURL,url, data) {
  axios.defaults.baseURL = baseURL
  return axios({
    method: "post",
    url,
    data: qs.stringify(data, { arrayFormat: "repeat" }),
    timeout: 5000
  })
}
/**
 * 提交post请求 发送的数据为json字符串
*/
export function post_json(baseURL,url, data) {
  axios.defaults.baseURL = baseURL
  return axios({
    method: "post",
    url,
    data,
    timeout: 5000
  })
}

export default axios

async 和 await 一般需要一起使用，async用于方法名称前，await用于调用的方法的前，

简单来说await让发送的网络请求有序，

例如：第二个请求需要第一个请求返回的数据作为参数，但用封装方法发送网络请求不会异步，会同步发送请求，这就导致可能会发生错误，用axios来做可能会产生回调地狱的情况。

使用await可以让axios异步发送请求。

先引入axios.js

import { get, post_json } from "../http/axios";

具体的使用方法

async onSubmit() {
      //请求参数
      let data = {
        password: this.password,
        username: this.username,
      };
      //请求地址
      let baseURL_swaggle = "http://47.100.84.201:8888/";
      let Rubres = await post_json(baseURL_swaggle, "user/login", data);

      if (Rubres.data.status == 200) {
      } else {

        Dialog.alert({

        }).then(() => {
          // on close
        });
      }
    },