Axios的基础使用

Axios从远程读取数据 安装Axios
直接使用npm install来进行安装

npm install axios --save

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

Axios的基础使用
文章图片
img1.png 示例 【Axios的基础使用】发起一个get请求(不带参数)

Axios的基础使用
文章图片
img2.png
console.log查看数据 Axios的基础使用
文章图片
img3.png 演示的接口地址:http://www.wwtliu.com/sxtstu/blueberrypai/getChengpinDetails.php

Axios的基础使用
文章图片
img4.png
带参数的 有两种形式: 第一种:

Axios的基础使用
文章图片
img5.png
第二种:

Axios的基础使用
文章图片
img6.png
这个示例不用参数:

Axios的基础使用
文章图片
Axios.png
拿到的数据 Axios的基础使用
文章图片
image.png 实际开发中一般用全局配置 Axios的基础使用
文章图片
image.png Axios的基础使用
文章图片
image.png
Axios的基础使用
文章图片
image.png 运行效果依然以上一样: Axios的基础使用
文章图片
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); });

    推荐阅读