安装

npm install axios --save

封装axios并使用

我们进行封装主要是看着清晰简洁、后期好维护。通常我们的项目都很大，页面就会越来越多，如果不封装，后期不好维护，比如要修改端口的时候，页面有很多，我们就要一个一个页面找，哪个接口需要更改，很不方便。所以对接口进行封装，有利于维护。

1. request.js文件中主要是用来请求拦截、响应拦截

   安装完成后新建一个network文件夹并新建一个request.js

import axios from 'axios'

export function request(config) {
     // 1.创建axios的实例
    const instance = axios.create({
        baseURL: 'https://elm.cangdu.org',
        timeout: 5000
    })
	// 2.axios的拦截器
    instance.interceptors.request.use(config => {
        return config
    }, err => {
    })
	// 3.响应拦截
    instance.interceptors.response.use(res => {
        return res.data
    }, err => {
        console.log(err);
    })

    // 发送网络请求
    return instance(config)
}

2. api.js文件中主要就是用来封装业务的各种接口，比如登录授权、城市列表、详情等

import {request} from "./request"

// 请求home页数据
// 获取默认地址
export function cityGuess() {
    return request({
        url: '/v1/cities',
        params: {
            type: 'guess'
        }
    })
}

// 获取热门城市
export function hotCity() {
    return request({
        url: '/v1/cities',
        params: {
            type: 'hot'
        }
    })
}

注意：请求方式分为POST、GET，所以参数GET对应的是params，POST请求时传递的参数应该用data

在vue实例中使用

created(){
    this.getCityGuessData()
},
methods: {
    // 网络请求相关方法
    getCityGuessData() {
        // 获取当前城市
        cityGuess().then(res => {
            this.guessCity = res.name
            this.guessCityId = res.id
        })
    }
}