[JavaScript知识库]【vue】axios请求封装，二次封装

前言

主要用于实现AJAX异步通信功能；axios可以在浏览器中发送XMLHttpRequests请求，可以在nodejs中发送http请求，还可以拦截请求和响应、转换请求和响应数据

步骤一，安装

npm install --save axios vue-axios

步骤二，main.js入口文件

//axios请求注册
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

步骤三，请求接口方式

//页面中直接使用的方式
 this.$http.get('http:xxxx/xxx').then((response) => {
  	console.log(response.data);
 });
 Vue.axios.get(api).then((response) => {
  	console.log(response.data)
})
 this.axios.get(api).then((response) => {
 	console.log(response.data)
})

Get请求

const axios = require('axios');

// 向给定ID的用户发起请求
axios.get('http/xxxx')
  .then(function (response) {
    // 处理成功情况
    console.log(response);
  })
  .catch(function (error) {
    // 处理错误情况
    console.log(error);
  })
  .then(function () {
    // 总是会执行
  });
//注意注意：因为params是添加到url的请求字符串中的，用于get请求。
//或者
axios.get('http/xxxx', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
    // 总是会执行
  });  

get请求-效果图，params是添加到url的请求字符串中的

POST请求

// 发起一个post请求
axios({
  method: 'post',//请求方式
  url: 'http/xxx',//请求路径
  data: {//请求参数
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

post请求-效果图，而data是添加到请求体（body）中的

请求配置

配置各项参数效果和作用

const axios = require('axios');
//qs是在修改将url中的参数转为对象；将对象转为url参数形式
const qs = require('qs');
axios({
  method: 'post', //请求方式
  url: 'sys/industry/querylist', //请求路径
  data: { //请求参数
    firstName: 'Fred',
    lastName: 'Flintstone'
  },

  // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
  // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
  baseURL: 'http://xxxxxx/epidemic_prevention/',
  
    //transformRequest  对发送的 data 进行任意转换处理，允许在向服务器发送前，修改请求数据
  transformRequest: [function (data, headers) {
    data.max = "新增"
    return qs.stringify(data);
  }],
  
   // `transformResponse` 在传递给 then/catch 前，允许修改响应数据，使用场景：将响应的数据剥离出一层res，最终return res.data。
   transformResponse: [function (data) {
      // 对接收的 data 进行任意转换处理
      return data;
    }],
	
  // 自定义请求头
  headers: {'X-Requested-With': 'XMLHttpRequest'},
  
  // 必须是一个简单对象或 URLSearchParams 对象
  params: {
    ID: 12345
  },
  
 // `timeout` 指定请求超时的毫秒数。
  // 如果请求时间超过 `timeout` 的值，则请求会被中断
  timeout: 1000, // 默认值是 `0` (永不超时)
});

transformRequestt-效果图

使用自定义请求头headers-效果图，通常传个token

params效果图，用于给地址后面传递参数-图示

qs库的引入(使用到的时候再引)

对发送或者收到的 data 进行任意转换处理（常用于 post请求的data数据进行加密处理）

 transformRequest: [function (data, headers) {
  		 return qs.stringify(data);
  }],
  
//  下面常见几种数组使用方式
qs.stringify({ a: ['b', 'c', 'd'] });
// 'a[0]=b&a[1]=c&a[2]=d'
qs.stringify({ a: ['b', 'c', 'd'] }, { indices: false });
// 'a=b&a=c&a=d'
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'indices' })
// 'a[0]=b&a[1]=c'
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'brackets' })
// 'a[]=b&a[]=c'
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'repeat' })
// 'a=b&a=c'

注意：需要注意的是，JSON中同样存在stringify方法，但是两者之间的区别是很明显的

//qs库的引入
//npm install qs命令进行安装
//页面中使用
import qs from 'qs';
let url ={ 
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
  // 转为url参数形式
  console.log(qs.stringify(data))
   // 转为对象
  console.log(qs.parse(url));

正常业务流程-请求封装

新建 request.js

import axios from 'axios'
// 域名
export const instance = axios.create({
  baseURL: 'http://xxxxx.cn',
  //   timeout: 1000,
})

// 添加请求拦截器，一般加token时使用
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });


// 添加响应拦截器,一般脱皮处理
instance.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response.data;
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
});


// 请求工具函数
export default (url, method, submitData) => {
  // 负责发请求：请求地址，请求方式，提交的数据
  return instance({
    url,
    method,
    // 1. 如果是get请求  需要使用params来传递submitData   ?a=10&c=10
    // 2. 如果不是get请求  需要使用data来传递submitData   请求体传参
    // [] 设置一个动态的key, 写js表达式，js表达式的执行结果当作KEY
    // method参数：get,Get,GET  转换成小写再来判断
    // 在对象，['params']:submitData ===== params:submitData 这样理解
    [method.toLowerCase() === 'get' ? 'params' : 'data']: submitData,
    // 自定义请求头
    headers: {
      'token':  localStorage.getItem("token") || ""
    },
  })
}

二次封装

新建 api.js

import request from '@/utils/request'
// 标题分类,homeHeadCategory为接口名
export const Index = (data) => {
    return request('/api/index/index', 'get',data)
  }

页面使用

//脱皮处理，就是让返回的数据少一层data
methods：{
//假如上面没写响应拦截器，还想脱皮处理，就是让返回的数据少一层data
//解决方法：{data:res}解决
    async Index() {
      try {
        const {data:res} = await Index();
        console.log(res.data.case_list);
      } catch (err) {
        uni.showToast({
          title: err,
          icon: "none",
        });
      }
    },
//如果写了响应拦截器，我们已经在响应拦截器里面做了脱皮，这里就直接用
  async Index() {
      try {
        const res = await Index();
        console.log(res.data.case_list);
      } catch (err) {
          this.$message.error({
          title: "获取失败",
          message: "获取失败",
          type: "none",
          duration: 2000,
        });
      }
    },

 }