vue3如何封装axios

Posted 2022-12-10 fengshaopu

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
      )

效果