一、Axios介绍

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中

二、集成Axios

1.在codesandbox上创建一个基于Vue的开发环境,并添加axios的依赖

添加axios依赖

2. 创建src/plugins文件夹,并增加axios.js文件，添加如下代码

import axios from "axios";

// 配置默认超时时间
axios.defaults.timeout = 5000;

axios.interceptors.request.use(
  function(config) {
    // 在发送请求之前做些什么
    return config;
  },
  function(error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 添加响应拦截器
axios.interceptors.response.use(
  function(response) {
    // 对响应数据做点什么
    return response;
  },
  function(error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

export default axios;

3. 在src/main.js文件中，导入axios

import HttpTool from "./plugins/axios.js";
Vue.prototype.HttpTool = HttpTool;

4. 修改src/App.vue文件，添加获取纽约天气的http请求代码

<template>
  <div id="app">
    <h1>纽约天气是:</h1>
    <div>温度：{{weather}}°C</div>
    <div>天气：{{temperature}}</div>
  </div>
</template>

<script>
export default {
  name: "App",
  mounted() {
    this.fetchCityCode().then(key => {
      this.fetchJson(key);
    });
  },
  data() {
    return {
      weather: "",
      temperature: ""
    };
  },
  methods: {
    fetchCityCode() {
      return new Promise((resolve, reject) => {
        this.HttpTool.get(
          " https://apidev.accuweather.com/locations/v1/search",
          {
            params: {
              q: "ny",
              apikey: "hoArfRosT1215"
            }
          }
        )
          .then(re => {
            let data = re.data[0];
            let key = data.Key;
            resolve(key);
          })
          .catch(err => {
            reject(err);
          });
      });
    },
    fetchJson(key) {
      this.HttpTool.get(
        "https://apidev.accuweather.com/currentconditions/v1/" + key + ".json",
        {
          params: {
            apikey: "hoArfRosT1215",
            language: "zh"
          }
        }
      ).then(re => {
        let data = re.data[0];
        this.weather = data.Temperature.Metric.Value;
        this.temperature = data.WeatherText;
        console.log(re);
      });
    }
  }
};
</script>

5. 可以看到右侧请求成功后显示的纽约的天气

   
   纽约天气

Promise介绍
es6入门Promise
Axios看云
codesandbox代码