因为vue-resource已不再维护，vue官方也推荐使用 axios ，所以在此坐下简单记录和用法.
axios 简介
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
- 从浏览器中创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防御 XSRF
浏览器支持
1212.png
安装
npm install axios
实际应用中全局注册
- 在vue原型链中设置别名：在项目中使用别名使用axios
import Vue from 'vue'
import axios from 'axios';
Vue.prototype.$ajax = axios; //此时在项目中通过this.$ajax.get()来使用axios .get()等
2.通过vue-axios来安装使用
- 安装vue-axios
npm install --save axios vue-axios
- 使用
import Vue from 'vue'
import VueAxios from 'vue-axios'
import axios from './axios';
Vue.use(VueAxios, axios); //此时在项目中通过this.axios.get()或 this.$http.get()来使用axios .get()等
全局配置及使用（多人开发）
axios .js 用于配置axios
import router from './router'
import store from './store'
import axios from 'axios';
//全局配置axios
axios.defaults.baseURL = http://localhost/'; //配置请求基本路径
axios.defaults.timeout = 1500; //配置超时时间
axios.defaults.isLoad = true; //显示加载动画
//headers请求头设置
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
config.headers = Object.assign(config.headers, {
token: store.state.token
});
//显示加载动画
if(config.isLoad){
store.commit('CHANGE_LOADING_TRUE');
}
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
//关闭加载动画
if(response.config.isLoad){
store.commit('CHANGE_LOADING_FALSE');
}
//token已过期跳转至登录页
if (response.data.code == "F004") {
router.push('/login');
}
//尚未登录跳转至登录页
if (response.data.code == "F003") {
router.push('/login');
}
return response.data;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
export default axios
getData.js 用于统一存放请求api
- 引入qs用于对数据处理
npm insatll qs
import axios from '../axios';
import qs from 'qs'
/**
* 通过用户名与密码进行登录操作
* @param{ Number } phone 手机号
* @param{ String } password 密码
* */
export const accountLogin = (phone, password) => axios.post("./app/ajaxLogin", qs.stringify({
mobile: phone,
password: password
})).then(response => {
return response;
}).catch(function (error) {
return error;
});
login.vue
import {accountLogin,} from '@/service/getData'
methods:{
async login() {
if (this.phone == null || this.phone == "") {
this.$root.$emit("tips", {
text: "请输入手机号"
});
return false
}
if (isPhone(this.phone)) {
this.$root.$emit("tips", {
text: "请输入正确的手机号码"
});
return false;
}
if (this.password == null || this.password == "") {
this.$root.$emit("tips", {
text: "请输入密码"
});
return false;
}
if (isPassword(this.password)) {
this.$root.$emit("tips", {
text: "请输入正确的密码"
});
return false;
}
this.userInfo = await accountLogin(this.phone, this.password);
this.$root.$emit("tips", {
text: this.userInfo.message
});
//记录用户信息
if (this.userInfo.success) {
this.GET_USERINFO(this.userInfo.data);
this.$router.push('./');
}
}
}
