Vue簡單封裝axios網(wǎng)絡請求的方法

更新時間：2022年11月15日 14:33:11 作者：隨筆都是學習筆記

這篇文章主要介紹了Vue簡單封裝axios網(wǎng)絡請求,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，對Vue封裝axios網(wǎng)絡請求相關知識感興趣的朋友一起看看吧

Vue簡單封裝axios網(wǎng)絡請求

一、utils下的httpUtils.js:

import axios from 'axios';
import querystring from 'querystring';

const errorHandler = (status, info) => {
    switch(status){
        case 400:
            console.log("400 - 語義錯誤");
            break;
        case 401:
            console.log("401 - 服務器認證失敗");
            break;
        case 403:
            console.log("403 - 服務器拒絕訪問");
            break;
        case 404:
            console.log("404 - 地址錯誤");
            break;
        case 500:
            console.log("500 - 服務器遇到意外");
            break;
        case 502:
            console.log("502 - 服務器無響應");
            break;
        default:
            console.log(info);
            break;
    }
}

// 創(chuàng)建axios實例
const instance = axios.create({
    // 放置網(wǎng)絡請求的公共參數(shù)
    timeout:5000, // 5s后超時
})

// 攔截器最常用
// 1、發(fā)送請求之前
instance.interceptors.request.use(
    config =>{
        if (config.method === 'post'){
            config.data = querystring.stringify(config.data)
        }

        // config中存在網(wǎng)絡請求的所有信息
        return config;
    },
    error =>{
        return Promise.reject(error)
    }
)
// 2、接收響應后
instance.interceptors.response.use(
    response => {
        // 三目運算根據(jù)狀態(tài)碼來判斷接收數(shù)據(jù)還是拒絕數(shù)據(jù)
        return response.status === 200 ? Promise.resolve(response):Promise.reject(response)
    },
    error=>{
        const { response } = error;
        // 自定義方法來輸出異常信息
        errorHandler(response.status,response.info)
    }
)

// 導出
export default instance;

二、/api下的path.js:

const base = {
    // 公共路徑
    baseUrl : "http://iwenwiki.com",
    chengpin : "/api/blueberrypai/getChengpinDetails.php",
    login : "/api/blueberrypai/login.php"
}

export default base;

三、/api下的index.js:

import axios from "../utils/httpUtils";
import path from "./path"

const api = {
    // 成品地址
    getChengpin(){
        return axios.get(path.baseUrl+path.chengpin)
    }
}

export default api;

四、組件中引入并請求：

<template>
  <div>
    <p>{{ msg }}</p>
  </div>
  
</template>

<script>
// import axios from 'axios';
// import QueryString from 'qs';
import api from "../api/index"


export default {
  name: 'HelloWorld',
  data(){
    return{
      msg:"111",
    }
  },
  mounted(){
        //Fetch API 基本用法
    // fetch('http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php').then(function(data){
    //   // text()方法屬于fetchAPI的一部分，它返回一個Promise實例對象，用于獲取后臺返回的數(shù)據(jù)
    //   return data.json();
    // }).then(function(data){
    //   console.log(data.chengpinDetails[0].title);
    // })
    // get
    // axios({
    //   method:"get",
    //   url:"http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php",
    // }).then(res=>{
    //   this.msg=res.data.chengpinDetails[0].title
    // })
    // post
    // axios({
    //   method:"post",
    //   url:"http://iwenwiki.com/api/blueberrypai/login.php",
    //   data: QueryString.stringify({
    //     user_id: "iwen@qq.com",
    //     password: "iwen123",
    //     verification_code: "crfvw"
    //   })
    // }).then(res=>{
    //   this.msg=res.data
    // })
      // 第二種get方法
    // axios.get('http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php').then(res=>{
    //   this.msg=res.data.chengpinDetails[0].title
    // })
      // 第二種post方法
    // this.$axios.post('http://iwenwiki.com/api/blueberrypai/login.php',QueryString.stringify({
    //   user_id: "iwen@qq.com",
    //   password: "iwen123",
    //   verification_code: "crfvw"
    // })).then(res=>{
    //   this.msg=res.data.success
    // })

    api.getChengpin().then(res=>{
      console.log(res.data)
    })
  }  
}
</script>

<style scoped>

</style>

查看效果：