axios异步请求数据的简单使用

摘要：使用模拟好后端数据之后模拟数据的使用参考，就需要尝试请求加载数据了。数据请求选择了，现在都推荐使用。规定要发送到服务器的数据。布尔值，表示请求是否异步处理。要求为类型的参数，请求成功后调用的回调函数。在一个中重写回调函数的字符串。

使用Mock模拟好后端数据之后（Mock模拟数据的使用参考：https://segmentfault.com/a/11...），就需要尝试请求加载数据了。数据请求选择了axios，现在都推荐使用axios。

axios（https://github.com/axios/axios）是基于 promise 的 HTTP 库。如官网文档介绍，npm i 之后，在需要的组件中加载就可以了。个人认为，编码的魅力在于，解决问题的方法不止一种，有时候这个方法在你的开发环境下ok，在我的开发环境下却不ok，所以，问题是各式各样的，而解决问题的方法也是百花齐放的。

npm i axios -S

在src目录下新建apis.js文件（项目逐渐完善的过程中会有很有个api接口，当然也可以命名为axios.js，命名是为了让别人看懂），并引入：

import axios from "axios";

之后，编辑apis.js文件，考虑封装axios.get或post请求

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)
  }
}

 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;
      });
    }
  }
}

很多组件都需要请求数据，每用一次导入一次很麻烦，全局配置之后就不用在组件中导入了。

在入口文件main.js中引入，之后挂在vue的原型链上：

import api from "./apis.js";
Vue.prototype.$http = api;

在组件中使用：

getBanner(){
    this.$http.getData("/getBanner").then(val => {
      this.bannerList = val.imgs;
    });
  }
  

在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里的方法名
  }
}

  

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: ""
     });
   });
 });
 

当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需要服务器配合，如果是访问的是第三方服务器，我们没有修改服务器的权限，那么这种方式是不可行的。

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
 });
}

全局配置post提交数据的格式：

Vue.http.options.emulateJSON = true;

全局配置根路径：

Vue.http.options.root = "http://localhost:8080";

同样地，由于浏览器的安全机制，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中写你想要请求数据的地址的域名
 

与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