vue中使用axios的封裝

nt1979發表於2021-09-09

在aixos資料夾下的index.js檔案中寫aixos的建構函式,然後可以自己配置引數

import axios from 'axios'
import qs from 'qs'
const instance = axios.create({
    baseURL: '',
    timeout: 1000,
    headers: { 'Content-Type': 'application/x-www-form-urlencoded;' }
});
instance.interceptors.request.use((config) => {
    if (config.method === 'post') {
//如果是post請求則進行序列化處理
        config.data = qs.stringify(config.data);
    }
    return config;
}, (error) => {
    return Promise.reject(error);
});
 instance.interceptors.response.use((res) => {
     if (res.status!==200) {
        return Promise.reject(res);
     }

     return res;
 }, (error) => {
     //404等問題可以在這裡處理
     return Promise.reject(error);
 });
export default instance

在main.js檔案中

import Vue from 'vue’
import axios from './axios’
Vue.prototype.KaTeX parse error: Expected 'EOF', got '寫' at position 16: axios = axios; 寫̲在Vue的prototype原…axios呼叫。

在helloworld.vue檔案中
如果是get請求,則

this.$axios({
  method: "get",
  url: "/api/zzz"
})
  .then(res => {
    //請求成功返回體的資料res
  })
  .catch(err => {
    //請求失敗返回體的資料err
  });

如果是post請求,則

this.$axios({
  method: "post",
  url: "/api/zzz",
  data:{
   name:"jianguang"
  }
})
  .then(res => {
    //請求成功返回體的資料res
  })
  .catch(err => {
    //請求失敗返回體的資料err
 });

來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/4822/viewspace-2815389/,如需轉載,請註明出處,否則將追究法律責任。

相關文章