axios异步要求数据的简朴运用

2019年8月20日 247次阅读来源: 默默

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

全局设置post提交数据的花样：

Vue.http.options.emulateJSON = true;

全局设置根途径：

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

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

    原文作者：默默
    原文地址: https://segmentfault.com/a/1190000017873144
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。