关于前端:Axios的封装以及如何使用

39次阅读

共计 4379 个字符，预计需要花费 11 分钟才能阅读完成。

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 接口模块

    // 导入封装的 axios
import 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.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 (
 <div className="login">
 111
 </div>
  )
}

总结

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

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

正文完
前端
发表至： 前端
2022-05-16
 0
关于前端:冴羽答读者问怎么才能像你一样写文章如喝水
关于前端:记录Element表格二次封装
关于前端:可扩展的前端1架构基础译
关于前端:项目实战-Webpack-to-Vite-为开发提速