目标：学会Axios基本用法
接上一章，我们来学习如何与服务器交互，这个很重要
如果没有交互功能，我们只能做纯粹的静态页面，样子货，基本没有实际用处。
好在，这个也不难。
先看一下Axios官网
简洁易用，这很好。代码比ajax舒服太多了
先安装一下，我们换一种方式，在package.json的dependencies里面加上axios，执行cnpm install即可
安装后，我们先做点准备工作，在项目根目录下新增两个配置文件
.env.development 这个表示开发阶段的配置
代码也贴一下，fastmock是一个免费的提供调试数据的网站，因为我们现在没有服务器端，所以用这个模拟。
这里面最重要的，就是baseUrl的配置
ENV = 'development'
# 使用fastmock的数据
VUE_APP_AXIOS_BASE_URL = 'https://www.fastmock.site/mock/dbe7258a05ee386732f7e277c95c796c/api'
VUE_APP_AXIOS_TIMEOUT = 2000
.env.production，这里面要填真实的服务器地址，上线的时候用。当然现在还没有，空着
ENV = 'production'
# 服务器地址
VUE_APP_AXIOS_BASE_URL = 'https://服务器域名'
VUE_APP_AXIOS_TIMEOUT = 2000
然后fastmock里面，我已经添加了两个接口，等一会调试用。
地址如下，这两个地址，可以在浏览器里面打开，观察下里面配置的返回数据
https://www.fastmock.site/mock/dbe7258a05ee386732f7e277c95c796c/api/getUserRouter
https://www.fastmock.site/mock/dbe7258a05ee386732f7e277c95c796c/api/getUserInfo
现在我们来引入Axios，新建utils/axios.js文件，代码如下，拦截器的代码难看一点，可以先不仔细看
重点是const instance = axios.create......， 这一行
import axios from 'axios'
import Vue from 'vue'
const instance = axios.create({
baseURL: process.env.VUE_APP_AXIOS_BASE_URL,// url = base url + request url
timeout: process.env.VUE_APP_AXIOS_TIMEOUT// request timeout
})
// request interceptor
instance.interceptors.request.use(
config => {
//添加token，这个值应该是登录后存到token里的，先写死，后面再改
config.headers['token'] ='token123'
return config
},
error => {
// do something with request error
console.log(error)// for debug
return Promise.reject(error)
}
)
// response interceptor
instance.interceptors.response.use(
response => {
//console.log(response.data)
//可以加一些共通处理，比如未登录、token失效时跳转到登录页
//response.data里面，如果有错误信息，可以弹出
return response.data
},
error => {
console.log(error)// for debug
Vue.prototype.$message.error(error.message)
return Promise.reject(error)
}
)
export default instance
然后我们在mian.js里面加两行代码，全局注册一下
现在我们在Login.vue文件里面加两个网络调用，测试一下
script部分
然后我们来看下页面
这两个都是get请求，并且没有传参数。还有一个post请求，也是使用非常多的，主要用于提交数据，上传文件等。用法差不多，看一下axios文档就好，本章完。
网友评论