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 instance
6.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中如何使用,如果感觉写的实用可以辛苦大家点个赞啦,谢谢,文章会不定期更新哒。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。