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，完成整个从请求到返回成功的流程：

Vue+mockjs+Axios 案例实践

Axios

创建拦截器

Vue

页面中发送Post请求：

MockJs

安装

mock接口

数据逻辑