vue-cli webpack项目使用axios

一：安装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>

五：结果显示