Vue项目使用axios

vue中引入axiox发送请求

安装

	npm install axios --save

使用方式分为两种情况：

• 第一种 ：

main.js

import axios from 'axios'
// 配置请求的跟路径
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
// 在 request 拦截器中，展示进度条 NProgress.start()
axios.interceptors.request.use(config => {
  // console.log(config)
  NProgress.start()
  config.headers.Authorization = window.sessionStorage.getItem('token')
  // 在最后必须 return config
  return config
})
// 在 response 拦截器中，隐藏进度条 NProgress.done()
axios.interceptors.response.use(config => {
  NProgress.done()
  return config
})
Vue.prototype.$http = axios

组件中使用

  getMock(){
    this.$axios({
        url:'/parameter/query',
        method: "get",
      }).then(res =>{
      console.log(res.data);
    });
  },

• 第二种：

对axios进行封装

新建service文件夹，新建request.js

request.js

import axios from "axios";
import { BASE_URL, TIMEOUT } from "./config";

const BASE_URL = "https://httpbin.org";
const TIMTOUT = 5

const instance = axios.create({
  baseURL: BASE_URL,
  timeout: TIMEOUT,
});

// http request 请求拦截器
instance.interceptors.request.use(
  (config) => {
    // 1.发送网络请求时, 在界面的中间位置显示Loading的组件

    // 2.某一些请求要求用户必须携带token, 如果没有携带, 那么直接跳转到登录页面
    // if (localStorage.getItem("token")) {
    //   config.headers.token = localStorage.getItem("token"); //携带权限参数
    // }

    // 3.params/data序列化操作
    
    console.log("请求被拦截");
    return config;
  },
  (err) => {}
);

// 响应拦截器
instance.interceptors.response.use(
  res => {
    console.log("响应被拦截");
    return res.data
  },err => {
    if (err && err.response) {
      switch (err.response.status) {
        case 400:
          console.log("请求错误");
          break;
        case 401:
          console.log("未授权访问");
          break;
        default:
          console.log("其他错误信息");
      }
    }
    return err;
  }
);

export default instance;

项目中使用

import request from "./request";

const testHttpBin = async (params) => {
  const res = await request({
    url: "/get",
    params: {
      name: "ws",
      age: 18,
    },
  });
  console.log(res);
  return res;
};

function testHttpBinPost(data) {
  return request({
    url: "/post",
    method:'post',
    data: {
      name: "ws",
      age: 20,
    },
  });
}

export { testHttpBin, testHttpBinPost };