axios的二次封装

1. 安装axios

npm i axios --save

2. 封装axios

import axios from 'axios'

export default function ajax(url = '', params = {}, type = 'GET') {
    let promise;
    return new Promise((resolve, reject) => {
        if (type.toUpperCase() === 'GET') {
            let paramstr = '';
            //拼接参数如:name='tom'&年龄='12'
            Object.keys(params).forEach(key => {
                paramstr += key + "=" + params[key] + '&'
            })
            //如果有参数，截取最后一个多余的&
            if (paramstr) {
                paramstr = paramstr.substring(0, paramstr.length)
            }
            //获取正确的请求地址
            url += '?' + paramstr
            //进行get请求
            promise = axios.get(url)
        } else if (type.toUpperCase() === 'POST') {
        //进行post请求
            promise = axios.post(url, params)
        }
        //对请求的结果进行处理
        promise.then((response) => {
            resolve(response.data)
        }).catch(err => {
            reject(err)
        })
    })
}

3. 统一接口

import ajax from './ajax.js'
const BASE_URL = 'http://xxxxxxx

export const getHomeData = () => ajax(BASE_URL + '/api/homeApi')

4. 组件中使用

<template>
  <div>home页</div>
</template>

<script>
//1.首先引用api
import { getHomeData } from "@/service/api.js";
export default {
  data() {
    return {};
  },
  created() {
    //2.调用并获取结果
    getHomeData().then(res => {
      console.log(res);
    });
  }
};
</script>

<style lang="less" scoped>
</style>