目录1. 什么是AxiOS?2. 回顾ajax3. 回顾Promise4. Vue封装Axios1. 什么是Axios? Axios 是一个基于 promise 的网络请求库,可以用
Axios 是一个基于 promise 的网络请求库,可以用于浏览器和 node.js,是一个第三方插件,第三方异步请求工具库
Axios的特点:
Ajax的特点:
Ajax创建步骤:
// 1.创建XMLHttpRequest实例
let xhr = new XMLHttpRequest()
// 2.打开一个连接
xhr.open('请求方式get/post','请求地址')
// 3.发送请求
// 必要时还需设置请求头格式:JSON/application/x-www-fORM-urlencoded
xhr.setRequestHeader()
// 必要时还需转换请求数据格式:JSON.stringfy(参数)/Qs.stringfy(参数)
xhr.send(请求参数)
// 4.接收响应
xhr.onreadystatechange=function(){
// 判断:请求是发送完成和请求是否发送成功
if(xhr.readyState===4 && xhr.status===200){
// 接收响应:必要时还要转换响应数据的格式 JSON.parse(xhr.response)
console.log(xhr.response);
}
}
Promise是一种异步编程解决方案。Promise构造函数接收两个参数:resolve和reject。resolve作为成功的回调函数,reject作为失败的回调函数。
// 1.创建promise对象
let p1=new Promise((resolve,reject)=>{
// resolve,reject是回调函数
// resolve函数是promise对象最终状态为成功状态
//reject函数是promise对象最终状态为失败状态
//非异步
//假设异步操作执行成功,修改promise对象状态为成功状态
if(3>2){
resolve('success')
}else{
//假设异步操作执行失败,修改promise对象状态为失败状态
reject('error')
}
})
//如何提供resolve和reject函数
//在promise原型里有then和catch
// 1.then方法表示的是成功之后的回调,对应resolve
// 2.catch方法表示的是失败之后的回调,对应reject
p1.then((res)=>{
console.log(res,'成功回调')
}).catch((error)=>{
console.log(error,'失败回调')
}).finally(()=>{
console.log('最终执行')
})
//如果then里面传了两个回调函数,第一个代表成功之后的回调,第二个代表失败之后的回调,分别代表resolve()和reject()
p1.then((res)=>{
console.log(res,'成功')
},(err)=>{
console.log(res,'失败')
});
Axios是一个基于promise的HTTP库,可以用在浏览器和node.js中。Jquery中也封装了ajax机制,但是仅适用于浏览器。
功能特点:
封装步骤:
在项目中安装axios:npm i -S axios创建封装axios的文件夹并导入axios,根据项目所需创建axios API:
import axios from "axios";
import Qs from 'qs';
let qs= Qs;
// 创建axios实例对象
let instance = axios.create({
baseURL:"http://121.199.0.35:8888",
timeout:5000
});
// 请求拦截器
instance.interceptors.request.use(config=>{
if(config.url!=='/user/login'){
config.headers.Authorization='eyJ0eXaiOiJKV1QiLCJhbGCiOiJIUzI1NiJ9.eyJ1c2VySWQiOiJNalU9Iiwic3ViIjoiYWRtaW4xIiwiaXNzIjoiMDk4ZjZiY2Q0NjIxZDM3M2NhZGU0ZTgzMjYyN2I0ZjYiLCJpYXQiOjE2NjQ5MzY4OTksImF1ZCI6InJlc3RhcGl1c2VyIiwiZXhwIjoxNjY1MTA5Njk5LCJuYmYiOjE2NjQ5MzY4OTl9.uLSFoGrqdvZS-3KA1HgjgshUZOqGbMWO5Rpr1yzMCAY';
}
return config
},error=>{
return Promise.reject(error)
});
// 响应拦截器 ---对axios封装响应数据做拦截
instance.interceptors.response.use(response=>{
let res=response.data;
return res
},error=>{
return Promise.reject(error)
});
// 封装get方法
export function get(url,params){
return instance.get(url,{
params,
})
}
//封装postJSON方法 json数据格式 --登录接口
export function postJSON(url,data){
return instance.post(url,data);
}
// 封装post方法 表单格式数据
export function post(url,data){
return instance.post(url,qs.stringify(data))
}
export default instance
到此这篇关于Axios在vue项目中的封装方法的文章就介绍到这了,更多相关Axios vue封装内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: Axios在vue项目中的封装步骤
本文链接: https://www.lsjlt.com/news/168913.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0