Axios的封装以及如何应用

提醒：本文依据黑马B站视频课整顿

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

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

一、Axios是什么

Axios 就是对 ajax 的封装

  1. 之前如何发动数据申请
  2. 最原生的new XMLHttpRequest对象发动Ajax申请(open send onreadystatechange readyState responseText)
  3. $.ajax{{配置对象}}
  4. $.post(url地址，function(){})
  5. $.get(url地址，处理函数)
  6. 当然还有起初出的 Fetch (这里就不多做解释,大家感兴趣能够专门去搜一下fetch的应用办法~)
  7. 当初用的 axios 来发动 ajax 申请
  8. 能够反对 get 和 post 等申请，然而无奈发动 JSONP 申请
  9. 如果波及到 JSONP 申请，能够让后端启用 cors 跨域资源共享即可
  10. 在 Vue 中，还能够应用 vue-resource 封装的 ajax 发动数据申请
  11. 在 vue-resource 反对 get，post，jsonp 申请

二、下载

参考网址：axios
cdn形式：<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
npm形式：npm install axios

三、应用axios

3.1 发动get申请

  1. 语法：
  2. 申请地址：http://地址?xx=yy&xx=yy&xx=yy
  3. 返回后果result体现的是Promise对象，自身能够调用then或catch办法，或通过async或await进一步润饰

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

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

  5. async和await染指

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

    3.2 发动post申请

  6. 语法：

    axios.post(地址,{xx:yy,xx:yy,xx:yy})

  7. 例子：

    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 例子

    <div id="app"> <button @click="send_post()">post申请</button> <button @click="send_get()">get申请</button></div><script> var vm = new Vue({     el: '#app',     data: {         msg: 'aaa'     },     methods: {         async send_get() {             var {data: dt} = await axios.get('http://127.0.0.1:3000/api/get', {params:{name: 'hello', age: 18}})             console.log(dt)         },         async send_post() {             var {data: dt} = await axios.post('http://127.0.0.1:3000/api/post', {name: 'hello', age: 18})             console.log(dt)         }     } })</script>

四、Axios的配置

  1. 把axios配置给Vue并成为其一个子成员，每次须要通过Vue触发axios调用(axios本人不要贸然执行)

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

  2. 给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 封装后应用

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

    // 导入封装的axiosimport axios from '../axios'export default {  //---------------------------暗藏页面----------------------------------------------  /*** 增加*/  hideParameterAdd(data) { return axios.post(`/add`, data)  },}
    //在要应用的.vue组件中import导入<script>import Api from '../api/api'export default {  methods: { async getData () {   let { data } = await Api.hideParameterAdd({id:1,name:'张三'})   console.log(data) }  }}</script>

  2. 在React中，新建api.js

    // 导入封装的request.jsimport request from './request'// 注册接口export const registerApi = (params) => request.post('/register', params)
    // React组件中import React, { useState } from 'react'// 在要应用的页面导入api.jsimport { loginApi } from './request/api'export default function Login() {  const onFinish = async (values) => { loginApi(values).then((res: IResRegister) => {   console.log(res) })  }  return ( <div className="login"> 111 </div>  )}

总结

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

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