vue3+ts安装axios及使用

背景说明

在和后端进行数据交互使用的组件，axios.用于完成http请求。 这篇文章从安装和封装两个维度进行总结。 项目环境说明: vue3+vite+ts

axios安装

进入项目所在的目录。执行如下命令:

npm install axios

npm install @icon-park/vue-next --save

# NPM
npm install element-plus --save
 

axios未封装的使用教程

未进行封装，在组件中如何使用axios. 代码案例如下:

axios.post("xxx/cron/getRunResult", {cron: newCronValue.value}).then((res: any)=>{
      console.log(res.data.data);
      if(res.data.code != 200){
        errorTip(res.data.message);
      }else{
        resultList.value = res.data.data;
        centerDialogVisible.value = true;
      }
  })
  const errorTip = (msg:string) => {
    ElMessage.error(msg)
  }
 

在这种使用方式中。 在业务请求完成之后。做了code业务编码的判断。 这是一个通用的需求。如果每次请求都这样处理。 代码就会臃肿。

axios 封装的使用教程

• request.ts

import { Reject } from "@icon-park/vue-next";
import { rejects } from "assert";
import axios from "axios";
import { ElMessage } from 'element-plus'
import { resolve } from "path";
const service = axios.create({
    baseURL: "https://api.zengzhang.vip", // url = base url + request url
    timeout: 3000,// request timeout
    // withCredentials:true
})
// 请求拦截
service.interceptors.request.use(
    (config: any) => {
        return config
    },
    (error: any) => {
        return Promise.reject(error)
    }
)
 
// 响应拦截
service.interceptors.response.use(
    (response: any) => {
        const res = response.data
        if (res.code !== 200) {
            ElMessage.error(res.message)
            return Promise.reject(res.message)
        } else {
            return response.data.data
        }
    },
    (error: any) => {
        if (error.response) {
            switch (error.response.status) {
                case 500:
                    ElMessage({
                        message: "服务器错误，请稍后重试",
                        type: "error",
                        duration: 5 * 1000
                    })
                    break
                default:
                    if (error.response.data.error == "invalid_grant") {
                        ElMessage({
                            message: error.response.data.error_description,
                            type: "error"
                        })
                    }
                    return Promise.reject(error)
            }
        }
    }
)

interface IHttp {
    get<T>(url:string, params?:unknown):Promise<T>;
    post<T>(url:string, params?:unknown):Promise<T>;
}

const http : IHttp = {

    get(url:string, params?:unknown){
        return new Promise((resolve, reject) => {
             service.get(url, {params}).then((res:any)=>{
                resolve(res);
             }).catch((err:any)=>{
                 reject(err);
             })   
        });
    },
    post(url:string, params?:unknown){
        return new Promise((resolve, reject) => {
             service.post(url, params).then((res:any)=>{
                resolve(res);
             }).catch((err:any)=>{
                 reject(err);
             })   
        });
    }

}

export default http

• api.ts 用于整理所有的业务请求。

import http from "@/http/request";
 
export async function getCronRunResult(cronValue:string) {
    const res = await http.post<{}>("/cron/getRunResult", {cron: cronValue});
    return res;
}

• 在vue页面中如何使用

import { getCronRunResult } from "@/http/api"

let resultList = ref([])
const centerDialogVisible = ref(false)
function run(){
  console.log("--run--");
  getCronRunResult(newCronValue.value).then((res:any)=>{
    resultList.value = res;
    centerDialogVisible.value = true;
  }).catch((err:any)=>{
    console.log("--err--"+ err);
  })
}

//template 引用
 <el-text v-for="item in resultList" >{{ item }}<br/></el-text>