axios的使用

最新推荐文章于 2023-05-23 12:17:25 发布

不忘初心1995

最新推荐文章于 2023-05-23 12:17:25 发布

阅读量134

点赞数

本文链接：https://blog.csdn.net/qq_42451776/article/details/119696284

版权

本文档展示了如何在Vue项目中使用axios进行HTTP请求的基本配置，包括设置基础URL、请求和响应拦截器，以及如何实现请求合并和取消请求。通过http模块导出的方法，如getStructure和updataUserHeader，可以方便地发起GET和POST请求。

摘要由CSDN通过智能技术生成

文章目录

基本配置

http.js

import axios from "axios"
// const baseURL=process.env.NODE_ENV=='development'?'/api/admin/':'/api/admin/'  // 代理
// const baseURL='http://139.155.253.86:5000/admin/'
const baseURL=process.env.NODE_ENV=='development'?'http://127.0.0.1:5000/admin/':'http://139.155.253.86:5000/admin/'

import {Message} from "element-ui"
const http = axios.create({
  baseURL,
  timeout: 10000,
  // headers: {
  //   "X-Client-Info":
  //     '{"a":"3000","ch":"1002","v":"5.0.4","e":"1606962163804279870816257"}',
  //     "X-Host": "mall.film-ticket.film.info",
  // }
});

// 添加请求拦截器
http.interceptors.request.use(function (config) {
  
  if (window.sessionStorage.getItem("token")) {
    config.headers.Authorization = window.sessionStorage.getItem("token")
    return config
  }
  
  // 在发送请求之前做些什么
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
http.interceptors.response.use(function (response) {
  // console.log(response)
  // 对响应数据做点什么
  if(response.data.code==200){
    return response.data;
  }
  
  Message.error(response.data.msg)
  return response.data;
}, function (error) {
  // 对响应错误做点什么
 
  return Promise.reject(error);
});

export default http

data.js

import http from '@/api/http'

// 获取院校结构
const getStructure = (data) => {
    return http({
        url: "work/structure",
        method: "get",
        params: data
    })
}

// 用户修改头像
const updataUserHeader = (data) => {
    return http({
        url: "user/updataUserHeader",
        method: "post",
        data
    })
}

export {
    getStructure,
updataUserHeader 
}

请求合并

 async mounted(){
    try{
      let data=await axios.all([
      axios.get("http://127.0.0.1:5001/user/login"),
      axios.post("http://127.0.0.1:5001/user/login")
    ])
    console.log(data);

    }catch(err){
      console.log(err);
    } 
  },

取消请求

// 方式一
const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('xxxx', {
  cancelToken: source.token
})
// 取消请求 (请求原因是可选的)
source.cancel('主动取消请求');

// 方式二
const CancelToken = axios.CancelToken;
let cancel;

axios.get('xxxx', {
  cancelToken: new CancelToken(function executor(c) {
    cancel = c;
  })
});
cancel('主动取消请求');