Vue+mockjs+Axios 案例实践
Axios
Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequest。
Axios官网如下：
https://axios-http.com/zh/docs/intro
创建拦截器
创建Axios实例：
import axios, {type AxiosInstance} from "axios";const http:AxiosInstance = axios.create({baseURL:'http://www.demo.com/',timeout: 1000,headers: {'X-Custom-Header': 'foobar'}
})
创建请求拦截器
http.interceptors.request.use((config:InternalAxiosRequestConfig)=>{// 在发送请求之前做些什么console.log("http.interceptors.request:",config.data);return config;
},)创建响应拦截器
//响应拦截器
http.interceptors.response.use((respon:AxiosResponse)=>{// 2xx 范围内的状态码都会触发该函数。// 对响应数据做点什么console.log("http.interceptors.response:",respon)return respon;
},(error:any)=>{// 超出 2xx 范围的状态码都会触发该函数。// 对响应错误做点什么console.log("http.interceptors.response error:",error)return Promise.reject(error);
})Vue
页面中发送Post请求：
const loginDate = reactive({userName: '',passWord: '',
})const handLogin =()=>{ //绑定在登录按钮的click属性上面post("/login",loginDate).then(()=>{console.log("handLogin sucess");},(e)=>{console.log("handLogin error",e);})
}
从控制台打印的log来看，我们的拦截器成功拦截了我们在表单中提交的post请求，以及超时的response返回。在http.ts的拦截器中，我们可以对所有的请求和响应进行处理。类似于登录以及其他具体的业务请求，我们就可以在具体的组件文件中用then 或 catch 进行处理。
MockJs
-
- 拦截ajax请求，生成伪数据
- 应用场景:在工作中,后端已经出接口文档,还没有实现数据
- 由前端依照接口文档模拟伪数据,实现前端开发功能
中文文档：
https://mockjs.fenxianglu.cn/
安装
使用之前，首先安装MockJs：
pnpm install mock -D //只在开发版本进行安装
mock接口
Mock.mock( rurl, rtype, function( options ) )
记录用于生成响应数据的函数。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。
rurl：可选。
表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。例如 //domain/list.json/、'/domian/list.json'。
rtype：可选。
表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。
function(options):可选。
表示用于生成响应数据的函数。
options
指向本次请求的 Ajax 选项集，含有 url、type 和 body 三个属性，参见 XMLHttpRequest 规范(opens new window)。
import Mock from "mockjs"Mock.setup({timeout:"200-600" //模拟一个200ms到600ms的请求延迟
})//模拟登录接口
Mock.mock("http://www.demo.com/login","post",(options:any)=>{const {username,password} = JSON.parse(options.body); //解构请求的数据if(username==="admin" && password=="123456"){return{code:200,message:"登录成功",data:{username:"admin",token:"mockToken"+username+password //记住登录状态，验证身份，存在本地，后端可以解密出用户名和密码}}}else{return{code:401,message:"用户名或密码有误",data:""}}
})***记得在main.ts中引入mockJs才能生效
import "./mock"
产看log，完成整个从请求到返回成功的流程：
数据逻辑
