vue简单封装axios

1、在src下新建api文件夹，在api文件夹下新建config.js文件

2、config.js配置如下：

import axios from 'axios';
import qs from 'qs'

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

axios.defaults.baseURL = '请求地址';
axios.defaults.timeout = 5000;

/*
*  若需拦截器可在此封装
*/

//返回一个Promise
export function fetch(url, params,type) {
  return new Promise((resolve, reject) => {
    if(type=='post'){

      //因后台post请求需form-data传参，所以使用qs.stringify
      axios.post(url, qs.stringify(params))
      .then(response => {
          resolve(response.data);
      }, err => {
          reject(err);
      })
      .catch((error) => {
          reject(error)
      })
    } else{
      axios.get(url,{params})
      .then(response => {
          resolve(response.data);
      }, err => {
        reject(err);
      })
      .catch((error) => {
          reject(error)
      })
    }   
  })
}

3、在api文件夹下新建api.js

4、引入config.js

import {fetch} from './config'
export default {
    bindAccount (params) {return fetch(`user/bind`, params, 'post')}
}

5、页面请求需引入api

<script>
import api from '@/api/api';
export default {
    methods: {
        let params = {
        name: this.name,
        mobile: this.phone,
        code: this.code
      }
      api.bindAccount(params).then((res) => {
        console.log(res)
      }).catch((error) => {
        console.log(error)
      })
    }
}
</script>