Vue axios封装

封装的好处：为了更好地维护，简化代码，有利于团队开发

知识涉及ES6的语法：

1.默认参数，2.模板字符串，3.Promise函数

axios发送ajax请求，使用Promise函数的高阶函数resolve和reject

封装步骤：

1》在src文件下新建文件夹api,api中新建ajax.js文件和index.js文件

ajax.js的作用是用promise对象去完成axios的get与post请求

index.js的作用是向外暴露出多个api接口函数

2》编辑ajax.js

// 封装ajax请求get 与post
// 使用promise对象异步请求
import axios from 'axios' 
export default function ajax(url = '', data = {}, type = 'GET') {
    return new Promise(function (resolve, reject) {
        let promise
        if (type === 'GET') { // 准备 url query 参数数据 
            let dataStr = ''
            //数据拼接字符串
            Object.keys(data).forEach(key => { dataStr += key + '=' + data[key] + '&' })
            if (dataStr !== '') {
                dataStr = dataStr.substring(0, dataStr.lastIndexOf('&'))
                url = url + '?' + dataStr
            }
            // 发送 get 请求
            promise = axios.get(url)
        }
        else {
            // 发送 post 请求
            promise = axios.post(url, data)
        }
        promise.then(response => { resolve(response.data) })
            .catch(error => { reject(error) })
    })
}

3》编辑index.js

ajax（）中的url参数不齐全，采用代理进行跨域

采用proxy跨域，根目录下新建文件命名vue.config.js(命名不可随意更改)

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'http://39.97.33.178',
                changeOrigin: true //同意跨域
            }
        }
    },

}

 index.js

 

// 根据文档接口暴露各个对象

import ajax from '../api/ajax.js';
const BASE_URL='/api';
// 接口一
export const requestAddress=(geohash)=>ajax(`$(geohash)/Position/$(geohash)`)
// 接口二
export const RequestFoodType=()=>ajax(BASE_URL+'/index_category')

 

4》组件中调用测试

在mouted生命周期中发送请求

import index from '../api/index.js'

mouted:{
    let data= RequestFoodType();
    console.log(data);
}

查看浏览器的console板块，是否有数据被打印出来