vue之数据拉取

因为vue-resource已不再维护，vue官方也推荐使用 axios ，所以在此坐下简单记录和用法.

axios 简介

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

• 从浏览器中创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换 JSON 数据
• 客户端支持防御 XSRF

浏览器支持

1212.png

安装

npm install axios 

实际应用中全局注册

1. 在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('./');
     }
}
}

参考资料

axios中文文档
qs
vue-axios