共计 4400 个字符，预计需要花费 11 分钟才能阅读完成。
使用 Mock 模拟好后端数据之后（Mock 模拟数据的使用参考：https://segmentfault.com/a/11…），就需要尝试请求加载数据了。数据请求选择了 axios，现在都推荐使用 axios。
axios（https://github.com/axios/axios）是基于 promise 的 HTTP 库。如官网文档介绍，npm i 之后，在需要的组件中加载就可以了。个人认为，编码的魅力在于，解决问题的方法不止一种，有时候这个方法在你的开发环境下 ok，在我的开发环境下却不 ok，所以，问题是各式各样的，而解决问题的方法也是百花齐放的。
axios 的入门
1、安装
npm i axios -S
2、引入
在 src 目录下新建 apis.js 文件（项目逐渐完善的过程中会有很有个 api 接口，当然也可以命名为 axios.js，命名是为了让别人看懂），并引入：
import axios from ‘axios’;
之后，编辑 apis.js 文件，考虑封装 axios.get 或 post 请求
3、apis.js 文件的编辑
import axios from ‘axios’;
const Domain = “http://localhost:8080”; // 定义根域名
axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’; // 设置 post 默认的请求头
// 封装 post 请求
export function post(action, params){
return new Promise((resolve, reject) => {
// url 判断是测试环境 就要拿 测试环境的域名，正式环境的就要用 正式域名
let url = Domain + action;
axios.post(url, params)
.then(response => {
resolve(response.data)
})
.catch(error => {
reject(error)
})
});
}
// 封装 get 请求
export function get(action, params){
return new Promise((resolve, reject) => {
axios.get(Domain + action, params)
.then(response => {
resolve(response.data)
})
.catch(error => {
reject(error)
})
});
}
export default {
postData(action, params){
return post(action, params)
},
getData(action, params){
return get(action, params)
}
}
4、在需要的组件中进行引用
import api from ‘../../apis.js’;
export default {
name: “banner”,
data() {
return {
bannerList: []
};
},
created(){
this.getBanner(); // 在页面渲染完成即加载
},
methods: {
getBanner(){
this.$api.getData(‘/getBanner’).then(val => {
this.bannerList = val.imgs;
});
}
}
}
5、全局配置 axios
很多组件都需要请求数据，每用一次导入一次很麻烦，全局配置之后就不用在组件中导入了。
在入口文件 main.js 中引入，之后挂在 vue 的原型链上：
import api from ‘./apis.js’;
Vue.prototype.$http = api;
在组件中使用：
getBanner(){
this.$http.getData(‘/getBanner’).then(val => {
this.bannerList = val.imgs;
});
}
6、axios 结合 vuex（在项目中还没用到，如果有问题，欢迎指正）
在 vuex 的仓库文件 store.js 中引用，使用 action 添加方法。action 可以包含异步操作，而且可以通过 action 来提交 mutations。action 有一个固有参数 context，但是 context 是 state 的父级，包含 state、getters
import Vue from ‘Vue’
import Vuex from ‘vuex’
import axios from ‘axios’
Vue.use(Vuex)
export default new Vuex.Store({
// 定义状态
state: {
banners: {
name: ‘pic’
}
},
actions: {
// 封装一个 ajax 方法
saveBanner (context) {
axios({
method: ‘get’,
url: ‘/getBanner’,
data: context.state.banners
})
}
}
})
在组件中发送请求的时候，需要使用 this.$store.dispatch 来分发
methods: {
getBananer() {
this.$store.dispatch(‘saveBanner’) // actions 里的方法名
}
}
异步加载的几种方法
1、$.ajax(url[, settings])
url: 要求为 String 类型的参数，（默认为当前页地址）发送请求的地址。type: 要求为 String 类型的参数，请求方式（post 或 get）默认为 get。data：规定要发送到服务器的数据。async：布尔值，表示请求是否异步处理。默认是 true。dataType: 要求为 String 类型的参数，预期服务器返回的数据类型。contentType：要求为 String 类型的参数，当发送信息至服务器时，内容编码类型默认为 ”application/x-www-form-urlencoded”。success：要求为 Function 类型的参数，请求成功后调用的回调函数。error：Function 类型的参数，请求失败后调用的回调函数。jsonp：在一个 jsonp 中重写回调函数的字符串。
$(function(){
$(‘#send’).click(function(){
$.ajax({
type: “GET”,
url: “test.json”,
data: {username:$(“#username”).val(), content:$(“#content”).val()},
dataType: “json”,
success: function(data){
// handle success
}
error: function(data){
// handle error
}
jsonp: “”
});
});
});
2、$.ajax 的跨域请求问题
当 Ajax 请求的 url 不是本地或者同一个服务器的地址时，浏览器会报一个错误：No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin…………由于浏览器的安全机制，不能调用不同服务器下的 url 地址。基于此，jQuery.ajax 给出了 jsonp 的解决方案：把服务器返回的数据类型设置为 jsonp。
$(function(){
$(‘#send’).click(function(){
$.ajax({
type: “GET”,
url: “test.json”,
data: {username:$(“#username”).val(), content:$(“#content”).val()},
dataType: “jsonp”, // jsonp 格式
success: function(data){
// handle success
}
error: function(data){
// handle error
}
jsonp: “callback”
});
});
});
但是，jsonp 是一种非官方的方法，而且这种方法只支持 get 请求，不如 post 请求安全。此外，jsonp 需要服务器配合，如果是访问的是第三方服务器，我们没有修改服务器的权限，那么这种方式是不可行的。
3、vue 框架中的 vue-resource
ue-resource 是 Vue.js 的一款插件，它可以通过 XMLHttpRequest 或 JSONP 发起请求并处理响应。vue-resource 体积小，支持主流浏览器。不过，vue2.0 之后就不再更新了，尤大神推荐使用 axios。
{
// GET /someUrl
this.$http.get(‘/someUrl’).then(response => {
// get body data
this.someData = response.body;
}, response => {
// error callback
});
}
4、vue-resource 的跨域请求问题
同样地，由于浏览器的安全机制，vue-resource 也面临着跨域请求的问题。解决方案如下：在 vue 项目下的 config/index.js 文件里面配置代理 proxyTable:
dev: {
// Paths
assetsSubDirectory: ‘static’,
assetsPublicPath: ‘/’,
proxyTable: {// 新增，解决跨域请求问题
‘/api’: {
target: ‘http://192.168.1.103:8080/’,
changeOrigin: true,
pathRewrite: {
‘`/api’: ‘/’
}
},
secure: false
},
target 中写你想要请求数据的地址的域名
4、axios 跨域请求的问题
与 vue-resource 一样，在 vue 项目下的 config/index.js 文件里面配置代理 proxyTable:
dev: {
// Paths
assetsSubDirectory: ‘static’,
assetsPublicPath: ‘/’,
proxyTable: {// 新增，解决跨域请求问题
‘/api’: {
target: ‘http://192.168.1.103:8080/’,
changeOrigin: true,
pathRewrite: {
‘`/api’: ‘/’
}
},
secure: false
},
不过 vue-resource 和 axios 这两个方法，可能配置了代理 proxyTable 还是会报：No ‘Access-Control-Allow-Origin’ header is present on ……的问题，这需要后端服务器配合设置：
header(“Access-Control-Allow-Origin”, “*”);
header(“Access-Control-Allow-Methods”,”PUT,POST,GET,DELETE,OPTIONS”);
emmmm，总感觉自己还是有点懵 233
