本文介绍: 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 -S
2.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 requests
2.3 axios封装常用的配置项
axios.create、axios.interceptors.request.use、axios.interceptors.response.use
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://blog.csdn.net/qq_45796592/article/details/128585095
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_51019.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。