共计 4379 个字符，预计需要花费 11 分钟才能阅读完成。
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 形式：<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
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 例子
<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 的配置
-
把
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 instance6.2 封装后应用
-
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> -
在
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 中如何应用，如果感觉写的实用能够辛苦大家点个赞啦，谢谢，文章会不定期更新哒。
正文完