快捷導(dǎo)航

vue3 axios安裝及使用示例詳解

更新時間：2024年04月15日 10:04:24 作者：叫我少年

這篇文章主要介紹了vue3 axios安裝及使用示例代碼,本文通過示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧

vue3 axios安裝及使用

安裝

使用npm安裝

$ npm install axios

封裝axios

import axios from 'axios';
import qs from "qs";
import store from "@/store/index";
import router from '@/router/index';
import { dataList } from '@/components/aspin/data';
import { message } from 'ant-design-vue';
import { storage } from '../storage/storage';
//數(shù)據(jù)請求字符
axios.defaults.baseURL = process.env.VUE_APP_API_URL,
  // 如果請求話費了超過 `timeout` 的時間，請求將被中斷
  axios.defaults.timeout = 5000;
// 表示跨域請求時是否需要使用憑證
axios.defaults.withCredentials = false;
// axios.defaults.headers.common['token'] =  AUTH_TOKEN
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';
// 允許跨域
axios.defaults.headers.post["Access-Control-Allow-Origin-Type"] = "*";
// 請求攔截器
axios.interceptors.request.use(function (config) {
  if (
    config.method === "post" ||
    config.method === "put" ||
    config.method === "delete"
  ) {
    // qs序列化
    config.data = qs.parse(config.data);
  }
  // 若是有做鑒權(quán)token , 就給頭部帶上token
  if (storage.get(store.state.Roles)) {
    store.state.Roles
    config.headers.Authorization = storage.get(store.state.Roles);
  }
  return config;
}, error => {
  message.error(error.data.error.message);
  return Promise.reject(error.data.error.message);
})
// 響應(yīng)攔截器
axios.interceptors.response.use(function (config) {
  dataList.show = true
  if (config.status === 200 || config.status === 204) {
    setTimeout(() => {
      dataList.show = false
    }, 400)
    return Promise.resolve(config);
  } else {
    return Promise.reject(config);
  }
},
  function (error) {
    if (error.response.status) {
      switch (error.response.status) {
        case 400:
          message.error("發(fā)出的請求有錯誤，服務(wù)器沒有進(jìn)行新建或修改數(shù)據(jù)的操作==>" + error.response.status)
          break;
        // 401: 未登錄
        // 未登錄則跳轉(zhuǎn)登錄頁面，并攜帶當(dāng)前頁面的路徑
        // 在登錄成功后返回當(dāng)前頁面，這一步需要在登錄頁操作。                
        case 401: //重定向
          message.error("token:登錄失效==>" + error.response.status + ":" + store.state.Roles)
          storage.remove(store.state.Roles)
          storage.get(store.state.Roles)
          router.replace({
            path: '/Login',
          });
          break;
        // 403 token過期
        // 登錄過期對用戶進(jìn)行提示
        // 清除本地token和清空vuex中token對象
        // 跳轉(zhuǎn)登錄頁面                
        case 403:
          message.error("用戶得到授權(quán)，但是訪問是被禁止的==>" + error.response.status)
          break;
        case 404:
          message.error("網(wǎng)絡(luò)請求不存在==>" + error.response.status)
          break;
        case 406:
          message.error("請求的格式不可得==>" + error.response.status)
          break;
        case 410:
          message.error("請求的資源被永久刪除，且不會再得到的==>" + error.response.status)
          break;
        case 422:
          message.error("當(dāng)創(chuàng)建一個對象時，發(fā)生一個驗證錯誤==>" + error.response.status)
          break;
        case 500:
          message.error("服務(wù)器發(fā)生錯誤，請檢查服務(wù)器==>" + error.response.status)
          break;
        case 502:
          message.error("網(wǎng)關(guān)錯誤==>" + error.response.status)
          break;
        case 503:
          message.error("服務(wù)不可用，服務(wù)器暫時過載或維護(hù)==>" + error.response.status)
          break;
        case 504:
          message.error("網(wǎng)關(guān)超時==>" + error.response.status)
          break;
        default:
          message.error("其他錯誤錯誤==>" + error.response.status)
      }
      return Promise.reject(error.response);
    } else {
      // 處理斷網(wǎng)的情況
      // eg:請求超時或斷網(wǎng)時，更新state的network狀態(tài)
      // network狀態(tài)在app.vue中控制著一個全局的斷網(wǎng)提示組件的顯示隱藏
      // 關(guān)于斷網(wǎng)組件中的刷新重新獲取數(shù)據(jù)，會在斷網(wǎng)組件中說明
      store.commit('changeNetwork', false);
    }
  }
)
export default axios

main.ts:

全局使用

import axios from './utils/http/axios'
全局使用
// 全局ctx(this) 上掛載 $axios
app.config.globalProperties.$api = axios

封裝使用

import request from '@/utils/http/axios'
import { IntArticle } from "@/api/data/interData";
export class article {
  /**
   * @description: 查詢總條數(shù)
   */
  static async GetCountAsync() {
    return await request({
      url: "/api/SnArticle/GetCountAsync",
      method: 'get',
    })
  }
  /**
   * @description: 查詢分類總條數(shù)
   * @param {number} id
   */
  static async ConutSort(id: number) {
    return await request({
      url: "/api/SnArticle/GetConutSortAsync?type=" + id + "&cache=true",
      method: 'get',
    })
  }
  /**
   * @description: 模糊查詢
   * @param {string} name
   */
  static async GetContainsAsync(name: string) {
    return await request({
      url: "/api/SnArticle/GetContainsAsync?name=" + name + "&cache=true",
      method: 'get',
    })
  }
  /**
   * @description: 主鍵查詢
   * @param {number} id
   * @param {boolean} cache
   * @return {*}
   */
  static async GetByIdAsync(id: any, cache: boolean): Promise<any> {
    return await request({
      url: "/api/SnArticle/GetByIdAsync?id=" + id + "&cache=" + cache,
      method: 'get',
    })
  }
  /**
   * @description: 按標(biāo)簽條件查詢
   * @param {number} id
   * @param {boolean} cache
   * @return {*}
   */
  static async GetTagtextAsync(id: number, cache: boolean): Promise<any> {
    return await request({
      url: "/api/SnArticle/GetTagAsync?labelId=" + id + "&isDesc=true&cache=" + cache,
      method: 'get',
    })
  }
  /**
   * @description: 標(biāo)簽分頁查詢
   * @param {number} page
   * @param {number} pagesize
   * @return {*}
   */
  static async GetFyTitleAsync(page: number, pagesize: number, isDesc: boolean, cache: boolean): Promise<any> {
    return await request({
      url:
        "/api/SnArticle/GetFyTitleAsync?" +
        "&pageIndex=" +
        page +
        "&pageSize=" +
        pagesize +
        "&isDesc=" + isDesc + "&cache=" + cache,
      method: 'get',
    })
  }
  /**
   * @description: 分類分頁查詢
   * @param {number} page
   * @param {number} pagesize
   */
  static async GetFySortTitleAsync(page: number, pagesize: number, cache: boolean): Promise<any> {
    return await request({
      url: "/api/SnArticle/GetfySortTestAsync?type=7&pageIndex=" + page + "&pageSize=" + pagesize + "&isDesc=true&cache=" + cache,
      method: 'get',
    })
  }
  /**
   * @description: 更新
   * @param {any} resultData
   * @param {string} type
   */
  static async UpdatePortionAsync(resultData: any, type: string): Promise<any> {
    return await
      request({
        // 更新
        url: "/api/SnArticle/UpdatePortionAsync?type=" + type,
        method: "put",
        data: resultData,
      })
  }
  /**
   * @description: 新增數(shù)據(jù)
   * @param {any} resultData
   */
  static async AddAsync(resultData: IntArticle) {
    return await
      request({
        url: "/api/SnArticle/AddAsync",
        method: "post",
        data: resultData,
      })
  }
  /**
   * @description: 更新數(shù)據(jù)
   * @param {IntArticle} resultData
   */
  static async UpdateAsync(resultData: IntArticle) {
    return await
      request({
        url: "/api/SnArticle/UpdateAsync",
        method: "put",
        data: resultData,
      })
  }
  /**
   * @description: 刪除
   * @param {number} id
   * @return {*}
   */
  static async DeleteAsync(id: number) {
    return await
      request({
        url: "/api/SnArticle/DeleteAsync?id=" + id,
        method: "delete",
      })
  }
}

axios 并發(fā)請求

處理并發(fā)請求的助手函數(shù)

axios.all(iterable)

axios.spread(callback)

//示例:
import { article } from '@/api/index';
import { blogsList } from "./components/data";
import axios from '@/utils/http/axios'
class methods {
  static async GetFySortTitle() {
    await article.GetFySortTitleAsync(blogsList.page, blogsList.pagesize, true).then((res: any) => {
      blogsList.dataResult = res.data;
    });
  }
  static async ConutSort() {
    await article.ConutSort(7).then((result: any) => {
      blogsList.count = result.data;
    });
  }
}
async function QueryAll() {
  // axios.all([await methods.ConutSort(), await methods.GetFySortTitle()]).then(axios.spread((Fy, co: any) => {
  //   blogsList.count = co.data;
  //   blogsList.dataResult = Fy.data;
  // }))
  axios.all([await methods.ConutSort(), await methods.GetFySortTitle()])
}
export {
  methods,
  QueryAll
}

到此這篇關(guān)于vue3 axios安裝及使用的文章就介紹到這了,更多相關(guān)vue3 axios使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: