一：安装axios依赖
cnpm install axios --save
二：创建axios实例
创建api接口请求文件，方便管理接口
新建文件：src/api/index.js
三：文件内容，在文件中设置了一个获取天气预报的接口进行测试
import axios from 'axios' // 创建axios实例 const instance = axios.create({ baseURL: '', timeout: 60000 }) // 请求拦截器 instance.interceptors.request.use( config => { // 在此处拦截过滤请求的内容和增加请求头设置 console.log('项目请求了一个接口，此时拦截，会取消该请求') // 请求头设置 // config.headers['xxx'] = 'xxxxxxx' return config }, error => { // console.log(error) Promise.reject(error) } ) // 响应拦截器 instance.interceptors.response.use( response => { // 处理返回的结果 console.log('后台接口返回了内容，可以在此处判断后台接口返回的是正常数据还是错误信息') // 正常返回数据 return response }, error => { if (error.response) { switch (error.response.status) { case 400: alert(error.response.data.message || '请求参数异常') break case 403: alert(error.response.data.message || '无访问权限') break default: alert(error.response.data.message || '服务端异常') } } // 返回错误信息 return Promise.reject(error) }) // 设置项目中需要用到的api，如果api接口比较多，也可以提取出来，然后在此文件导入 const api = { // 测试获取天气预报信息 getWeatherInfo (params) { return new Promise((resolve, reject) => { instance.get(`https://www.tianqiapi.com/api/`, { params: params }).then((res) => { resolve(res) }) }) } } export default api四：在组件中调用设置的接口
测试组件内容：
<template> <div> <!-- 获取天气预报信息按钮 --> <div> <button type="button" @click="getWeather">获取天气预报信息</button> </div> <!-- 展示天气预报信息 --> <h2>天气预报信息如下：</h2> <div>{{weather}}</div> </div> </template> <script> // 导入定义配置的接口 import api from '@/api' export default { data () { return { weather: null // 天气预报信息 } }, methods: { /** * 获取天气预报信息 **/ getWeather () { api.getWeatherInfo({ version: 'v1' }).then((res) => { this.weather = res.data }) } } } </script> <style scoped> </style>五：结果显示
