vue3axios配置與簡單封裝

一，安裝axios

npm install axios

 

 

二，配置axios請求

　　1.在src目錄下新建 request 目錄

　　2. request 目錄下新建http.js請求

　　3.配置請求頭與常用請求方式封裝

　　　　

import axios from "axios";
import qs from "qs";

// axios.defaults.baseURL = 'http://www.baidu.com/api/'  //正式
axios.defaults.baseURL = "http://www.myapp.com/API/WebAPI/"; //測試

//post請求頭
axios.defaults.headers.post["Content-Type"] =
  "application/x-www-form-urlencoded;charset=UTF-8";
//設置超時
axios.defaults.timeout = 10000;

axios.interceptors.request.use(
  (config) => {
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

axios.interceptors.response.use(
  (response) => {
    if (response.status == 200) {
      return Promise.resolve(response);
    } else {
      return Promise.reject(response);
    }
  },
  (error) => {
    console.log("請求錯誤！" + error);
  }
);
export default {
  //導出post請求
  post(url, data) {
    return new Promise((resolve, reject) => {
      axios({
        method: "post",
        url,
        data: qs.stringify(data),
      })
        .then((res) => {
          resolve(res);
        })
        .catch((err) => {
          reject(err);
        });
    });
  },
  //導出get請求
  get(url, data) {
    return new Promise((resolve, reject) => {
      axios({
        method: "get",
        url,
        params: data,
      })
        .then((res) => {
          resolve(res);
        })
        .catch((err) => {
          reject(err);
        });
    });
  },
};

　　4.引用請求

　　

import http from "../request/http";

　　http
      .get("GetInfoByID", {
        ID: "666",
      })
      .then((res) => {
        console.log(res);
      });

4.1全局引用

修改main.js

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import http from "./request/http";

const app = createApp(App);
app.config.globalProperties.$http = http;
app.use(store).use(router).mount("#app");

調用

const _this = this;
    _this.$http
      .get("GetColumnByid", {
        Cid: "5",
      })
      .then((res) => {
        console.log(res);
      });

 

三.跨域問題解決（沒有跨域問題直接忽略以下）

　　叫后台去解決或者設置代理

　　vue3處理方案

　　在vue.config.js的module.exports里面添加

　　

  devServer: {

    proxy: {

      "/api": {

        target: "http://www.myapp.com/API/WebAPI/",

        changeOrigin: true,

        pathRewrite: {

          "^/api": "",

        },

      },

    },

  },

http.js里面相應的鏈接也得改改了

axios.defaults.baseURL = "/api/"; //測試

差不多就是這樣了