目录

第一章、前言

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 -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({// 配置对象// 基础路径,发请求时，路径会出现apibaseURL:'/code',// 代表请求时间timeout:5000})// 请求拦截器：在请求之前，请求拦截器可以检测到，在发出去之前做一些事requests.interceptors.request.use((config)=>{// 进度条开始动nprogress.start()// console.log(1,store)if(store.state.detail.uuid_token){//请求一个头字段idconfig.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

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 ={//用户登录信息/tokenuserLogin:"",}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请求：

AJAX及其相关知识应用（很详细）_❆VE❆的博客-CSDN博客