技術標籤：前端axiosvue

1 官網安裝依賴

npm install axios
npm install --save axios vue-axios

2 在main.js中引入

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

3 在api資料夾 新建http.js

4.在http.js中 增加請求設定，以及攔截器

//引入axios
import axios from 'axios'
import VueAxios from
 
 'vue-axios'
//請求頭設定

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,//請求時間
  headers: {'X-Custom-Header': 'foobar'}//請求頭
});

//攔截器設定
// 新增請求攔截器
instance .interceptors.request.use(function (config) {
    // 在傳送請求之前做些什麼
    return config;
  }, function (error) {
    // 對請求錯誤做些什麼
 

    return Promise.reject(error);
  });

// 新增響應攔截器
instance .interceptors.response.use(function (response) {
    // 對響應資料做點什麼
    return response;
  }, function (error) {
    // 對響應錯誤做點什麼
    return Promise.reject(error);
  });
  
  //一定要匯出封裝的方法
  export default instance

5 在api下新建 request.js

6 在request.js 中匯入 http.js 封裝的 instance 方法，封裝介面

import request from "./http"

export const getPic = ()=>{
    return request({
        url:"/data/福利/10/4",
        method:"get"
    })
}

完成~~~~