Vue3中发起请求

Vue3中发起请求

 

安装

npm i axios -S 或者 yarn add axios

 

封装

封装 axios

src => request => request.ts 中存放着请求本体

import axios from "axios"
​
const instance = axios.create({
    baseURL: "项目基本路径",
    timeout: 3500  //响应时间
})
​
//请求拦截器
instance.interceptors.request.use(
    config => {
        return config
    }, err => {
        Promise.reject(err)
    }
)
//响应拦截器
instance.interceptors.response.use(
    response => {
        return response
    }, err => {
        Promise.reject(err)
    }
)
​
export default instance;

 

配置跨域

• 因为在 request.ts 中直接写具体接口地址，会产生跨域的问题,所以为了避免跨域,我们可以配置proxy代理服务器

1. request.ts中的更改

   baseURL: "项目基本路径",
   ///更改为///
   baseURL:'/api',

2. vite.config.ts中进行配置

   export default defineConfig({
     plugins: [vue()],
     resolve:{
       alias:{
         "@":path.resolve(__dirname,'./src')
       }},
     server:{
       proxy:{
         '/api':{
           target:'基本路径',
           changeOrigin:true,
           rewrite: (path) => path.replace(/^\/api/, ''),
         }
   }}})

    

 

请求数据携带token

请求中有很大一部分的请求需要在请求头中携带token传输给后台

instance.interceptors.request.use(
    (config) => {
        console.log("请求拦截器");
        let token = localStorage.getItem("token");
        if (token) {
            if (config.headers) {
                config.headers["Authorization"] = token
            }
        }
        return config;
    },
    (err) => {
        Promise.reject(err);
    }
);

• 通过判断是否已经在 localstorage 中存储了token与是否请求需要携带token作为双重判断,再发送请求

 

 

API管理

请求的最终目的就是从对应的接口拿到相关的数据,那么接口API的编写就十分重要

因为项目的体量实则是十分庞大的,接口繁多,此时就需要对接口实行 模块化定义

接口模块化

• http.js 类似于vue2的API.js用于集中管理接口

src=>request=>http.js

export * as 自定义接口类名 from "./自定义文件夹"
export * as admin from "./admin"

• 因为都导出到了相对应的接口当中,所以就需要以模块名集中引入

• 复合写法,将对应文件夹中所有的接口以 自定义接口类名 作为类名进行集体导出

 

src=>request=>自定义模块化API文件夹

• 模块化操作api ,将不同页面的请求API 提取出来

• 将我们所有的请求都调取到相对应的组件声明文件夹中

import http from './request';
​
export const adminLogin = (params: ILoginParams): RES<ILoginAdminModel> => http.post("/admin/login", params)
​
export const adminInfo = (): RES<ILoginInfoModel> => http.get("/admin/info")

 

对API进行类型约束

对API进行类型约束也可以采取 模块化 将所有的类名与接口提取出来放在指定文件当中

types(统一规定存放类型声明组件)=>global.d.ts

interface IResponse<T> {
    code: number;
    data: T;
    message: string;
}
​
type RES<T> = Promise<IResponse<T>>

• global文件,所有请求都会使用到的公共文件

• 类似于请求拿回的数据类型约定,这种类型定义的复用性就很高,所以就放在公共组件当中

 

types(统一规定存放类型声明组件)=>相对应的API组件.d.ts

• 存放一些只有当前接口用得上的类型约束

  interface ILoginAdminModel {
      token: string;
      tokenHead: string;
  }
  ......

 

 

组件中使用请求

引入

import * as http from "@/request/http"

• 因为请求都被放到admin当中了,所以就得通过从admin中拿回请求

使用

http.admin.adminLogin ( 参数 ).then(res=>成功的回调函数)