Axios的封装以及如何使用

提示：本文根据黑马B站视频课整理

有小伙伴在评论里让我出一篇关于Axios的，本文就整理了一下Axios的使用封装的问题，视频指路黑马程序员

提示：以下是本篇文章正文内容，下面案例可供参考

一、Axios是什么

Axios 就是对 ajax 的封装

之前如何发起数据请求
最原生的new XMLHttpRequest对象发起Ajax请求(open send onreadystatechange readyState responseText)
$.ajax{{配置对象}}
$.post(url地址，function(){})
$.get(url地址，处理函数)
当然还有后来出的 Fetch (这里就不多做解释,大家感兴趣可以专门去搜一下fetch的使用方法~)
现在用的 axios 来发起 ajax 请求
可以支持 get 和 post 等请求，但是无法发起 JSONP 请求
如果涉及到 JSONP 请求，可以让后端启用 cors 跨域资源共享即可
在 Vue 中，还可以使用 vue-resource 封装的 ajax 发起数据请求
在 vue-resource 支持 get，post，jsonp 请求

二、下载

参考网址：axios
cdn方式：
npm方式：npm install axios

三、使用axios

3.1 发起get请求

语法：
请求地址：http://地址?xx=yy&xx=yy&xx=yy
返回结果result体现的是Promise对象，本身可以调用then或catch方法，或通过async或await进一步修饰

给服务器传递参数的时候需要借助params成员

const result = axios.get(地址,{params:{xx:yy,xx:yy,xx:yy....}})

async和await介入

async function getList(){
  var result = await axios.get('http://127.0.0.1:3000/api/get')
}

3.2 发起post请求

语法：
```
axios.post(地址,{xx:yy,xx:yy,xx:yy})
```

例子：

async function send_post() {
let result  = await axios.post('http://127.0.0.1:3000/api/post', {name: 'hello', age: 18})
console.log(result)
}

3.3 例子

四、Axios的配置

把axios配置给Vue并成为其一个子成员，每次需要通过Vue触发axios调用(axios自己不要贸然执行)

Vue.prototype.$http = axios// 在main.js中配置
this.$http.get()// 在组件中使用，$http是vue指向axios的成员名称，可以自定义为其他

给axios设置请求根地址，统一设置请求地址的前缀，做应用的时候就使用后缀，提升开发效率

axios.defaults.baseURL = '根地址' //语法

// 引入axios和配置
axios.defaults.baseURL = 'http://127.0.0.1:3000/api'
Vue.prototype.$http = axios

五、拦截器interceptors

5.1 为什么使用拦截器

axios在客户端与服务端之间传递数据时候是有时间消耗的
网络好、服务器比较空闲，axios的执行速度快
网络不好、服务器比较繁忙，axios的执行速度慢(这时用户需要多等待)
axios无论执行速度快还是慢，用户都需要等待，如果在axios执行过程中页面给予一定的提示，那么用户体验就比较好，这时候拦截器就可以应用上
5.2 axios本身有两种拦截器：请求拦截、响应拦截
请求拦截器
axios每次开始请求的时候先执行此处逻辑，在这个地方可以给axios做出发前的配置，也可以做出发前的检查工作，检查ok的情况下就开始向服务器端发请求

config代表axios请求的配置对象，后期可以借此给axios做相关配置

// axios的请求拦截器
axios.interceptors.request.use(function(config) {
// -------------------------------------------
// axios请求前的逻辑处理
nprogress.start()
var token = window.sessionStorage.getItem('token')
if (token !== null) {
  config.headers.Authorization = token
}
//---------------------------------------
return config
}, function(error) {
return Promise.reject(error)
})

响应拦截器
axios完成与服务端机交互回到客户端后就执行此处逻辑，在这个地方可以做一些后续收尾事宜

response代表服务器端给axios返回的信息，一般不做处理

// 添加响应拦截器
axios.interceptors.response.use(function(response) {
// 对响应数据做点什么
nprogress.done()

return response
}, function(error) {
// 对响应错误做点什么
return Promise.reject(error)
})

六、封装Axios

6.1 封装

在Vue项目中，可以在src根目录下新建一个axios.js(或axios.ts)
在React项目中，可以新建一个request文件夹，request文件夹中新建一个request.js(或request.ts)

import axios from 'axios'

// 如果是ts文件可以加上这个接口
// 配置项接口
/**interface AxiosOption {
  baseURL: string
  timeout: number
}*/


// 配置项
//const axiosOption: AxiosOption = { // ts的话使用这个限定类型
const axiosOption = {
  baseURL: 'http://127.0.0.1:9000/manage',
  // baseURL: '/api',// 配置跨域后可以使用这个/api这个不固定，可以根据自己配置的跨域替换
  timeout: 5000,
}

// 创建一个单例
// 由于实际项目中可能会有多个接口地址
// create可以创建多个实例，在接口中要用几个地址就可以创建几个实例
const instance = axios.create(axiosOption)

// 添加请求拦截器
instance.interceptors.request.use(
  function (config) {
    // axios请求前的逻辑处理
    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 instance

6.2 封装后使用

vue中，新建api.js接口模块

// 导入封装的axios
import axios from '../axios'
export default {
  //---------------------------隐藏页面----------------------------------------------
  /**
* 添加
*/
  hideParameterAdd(data) {
 return axios.post(`/add`, data)
  },
}

//在要使用的.vue组件中import导入

在React中，新建api.js

// 导入封装的request.js
import request from './request'
// 注册接口
export const registerApi = (params) => request.post('/register', params)

// React组件中
import React, { useState } from 'react'
// 在要使用的页面导入api.js
import { loginApi } from './request/api'

export default function Login() {
  const onFinish = async (values) => {
 loginApi(values).then((res: IResRegister) => {
   console.log(res)
 })
  }

  return (
 
 111
 
  )
}

总结

提示：这里对文章进行总结：

以上就是Axios的介绍以及封装，封装之后再Vue中和在React中如何使用，如果感觉写的实用可以辛苦大家点个赞啦，谢谢，文章会不定期更新哒。

Axios的封装以及如何使用