目录
第一章、前言
1.1 axios是什么
1.2 axios二次封装的原因
1.3 axios的特性
第二章、axios的二次封装
2.1 axios安装
2.2 axios封装一般步骤
2.3 axios封装常用的配置项
2.4 使用封装的axios
第一章、前言
1.1 axios是什么
- 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，简单的理解就是ajax的封装
- 在使用Vue.js框架开发前端项目时，会经常发送ajax请求服务端接口，在开发过程中 需要对axios进一步封装，方便在项目中的使用
1.2 axios二次封装的原因
- 进行二次封装主要使用到的就是两个拦截器：
- 请求拦截器：在发送请求之前处理一些公共的业务
- 响应拦截器：当服务器数据响应之后又处理一些事情
1.3 axios的特性
- 从浏览器中创建 XMLHttpRequest
- 从 node.js 发出 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 自动转换JSON数据
第二章、axios的二次封装
2.1 axios安装
npm install axios -S2.2 axios封装一般步骤
- 在项目根目录的src文件夹下新建一个utils文件夹(utils文件夹常用于放其他js插件)
- 在文件夹下放request.js文件,在request.js中首先导入axios
- 然后设置属性，比如baseURL（公共地址）和 timeOut (超时时间）
- 还可以设置响应拦截和请求拦截，在请求拦截中经常设置loading动画的开启和配置请求头的token
- 在响应拦截中可以关闭loading和根据后端返回的状态码检测token是否有效
- 最后把requests（注意这里是我们创建的axios对象）暴露出来
大致代码：
// 对于axios进行二次封装
import axios from "axios";
// 引入进度条
import nprogress from "nprogress";
// 引入进度条样式
import "nprogress/nprogress.css"
//在当前模块引入store
import store from '@/store'
//1、利用axios对象的方法create,去创建一个axios实例
// 2、request就是axios，只不过稍微配置一下
const requests = axios.create({
// 配置对象
// 基础路径,发请求时，路径会出现api
baseURL:'/code',
// 代表请求时间
timeout:5000
})
// 请求拦截器：在请求之前，请求拦截器可以检测到，在发出去之前做一些事
requests.interceptors.request.use((config)=>{
// 进度条开始动
nprogress.start()
// console.log(1,store)
if(store.state.detail.uuid_token){
//请求一个头字段id
config.headers.userTempId = store.state.detail.uuid_token
}
//判断需要携带token带给服务器、
if(store.state.user.token){
config.headers.token = store.state.user.token
}
return config;
});
// 响应拦截器
requests.interceptors.response.use((res)=>{
// 成功的回调函数
// 进度条结束
nprogress.done()
return res.data;
},(error)=>{
// 失败的回调函数
return Promise.reject(new Error('faile'));
})
// 暴露
export default requests2.3 axios封装常用的配置项
axios.create、axios.interceptors.request.use、axios.interceptors.response.use
Vue.js Ajax(axios) | 菜鸟教程
2.4 使用封装的axios
- 在文件api根目录index.js文件使用：
//引入
import requests from "./request.js"; //路劲自己修改
export const login = (params) => {
return requests({
url: "接口路径",
method: "post" , //后端给什么写什么
data: params
})
}然后页面引用——
这里用到的就是vue中的store存储数据(注意这里只是示范，登录获取的token信息一般会永久存储在浏览器)：
import {login} from '@/api'
const state ={
//用户登录信息/token
userLogin:"",
}
const mutations={
GATLOGIN(state,value){
state.userLogin = value
},
}
const actions={
async getLogin({commit}){
//这里的data（用户登录账号密码）需要传参
let result = await login(data);
//console.log(result)
if(result.code === 200){
commit("GATLOGIN",result.data)
//console.log(result.data)
}
},
}
const getters={
}
export default{
state,
mutations,
actions,
getters
}- 如果目标是与数据库打通前后端（这里里面的传参数据是为了方便描述写的，具体需要分析）
axios.get("http://localhost:8080/api/userLogin/userLoginlist(url路径)",{
params:{
userPassword:this.ruleForm.pass,
userId:this.userId
}
}).then(
res=>{
this.$message({
message:'用户信息修改成功',
type:'success'
})
},
error=>{
console.log("b",error.message)
}
)axios.post('/axios-server',{
username:'admin',//请求体
password:'admin'
},{
params:{
id:100,
vip:7
},
})
axios请求：文章来源：https://www.toymoban.com/news/detail-727321.html
AJAX及其相关知识应用（很详细）_❆VE❆的博客-CSDN博客文章来源地址https://www.toymoban.com/news/detail-727321.html
到了这里，关于axios二次封装的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
