Axios的基础使用

Axios从远程读取数据

安装Axios
直接使用npm install来进行安装

npm install axios --save

由于axios是需要打包到生产环境中的，所以使用–save来进行安装
引入Axios
我们在mian.js页面引入Axios，由于使用了npm来进行安装，所以这里不需要填写路径

import axios from 'axios'

img1.png

示例

发起一个get请求(不带参数)

img2.png

console.log查看数据

img3.png

演示的接口地址：http://www.wwtliu.com/sxtstu/blueberrypai/getChengpinDetails.php

img4.png

带参数的

有两种形式：

第一种：

img5.png

第二种：

img6.png

这个示例不用参数：

Axios.png

拿到的数据

image.png

实际开发中一般用全局配置

image.png

image.png

image.png

运行效果依然以上一样：

image.png

拦截器

在请求或响应被 then 或 catch 处理前拦截它们。

// 添加请求拦截器(发送数据的拦截器)
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);
  });