你的位置:首页 > 信息动态 > 新闻中心
信息动态
联系我们

vue3如何封装axios

2021/12/21 16:48:33

1.下载axios 

npm install axios -S

2.下载 qs 

npm install qs -S

3.然后可以在文件夹下面创建相应的axios的文件比如index

4.然后配置

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

// axios.defaults.baseURL = ''  //正式
// axios.defaults.baseURL = 'http://test' //测试

//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 => {
  	alert(`异常请求:${JSON.stringify(error.message)}`)
  }
);
export default {
  post(url, data) {
    return new Promise((resolve, reject) => {
        
      axios({
          method: 'post',
          url,
          data: qs.stringify(data),
        })
        .then(res => {
          resolve(res.data)
        })
        .catch(err => {
          reject(err)
        });
    })
  },

  get(url, data) {
    return new Promise((resolve, reject) => {
      axios({
          method: 'get',
          url,
          params: data,
        })
        .then(res => {
          resolve(res.data)
        })
        .catch(err => {
          reject(err)
        })
    })
  }
};

然后可以选择局部导入

import { ref, defineComponent, reactive } from "vue";
import headwdwdder  from "./header.vue";
import  store from '../store/index'
import axios from '../axios/index'

使用

   axios.post(store.state.url+`/wcmdActivity/findActivityList? 
            pageSize=${10}&pageNum=${1}`).then((res)=>{
          list.table=res.data.list
      })

效果