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

2019-01-13 admin

使用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

[转载]原文链接:https://segmentfault.com/a/1190000017873144

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-50902.html

文章标题:axios异步请求数据的简单使用

相关文章
css布局的各种FC简单介绍:BFC,IFC,GFC,FFC
什么是FC? Formatting Context,格式化上下文,指页面中一个渲染区域,拥有一套渲染规则,它决定了其子元素如何定位,以及与其他元素的相互关系和作用。 BFC 什么是BFC Block Formatting Context,块...
2018-05-17
Angular2-primeNG文件上传模块FileUpload使用详解
近期在学习使用Angular2做小项目,期间用到很多primeNG的模块。 本系列将结合实战总结angular2-primeNG各个模块的使用经验。 文件上传模块FileUploadModule 首先要在使用该组件的模块内导入文件上传模块 ...
2017-03-09
YouTube正式默认使用HTML5视频播放器
YouTube视频网站现在默认使用HTML5播放器,这意味着更好的性能、 稳定性、 电池寿命和甚至是更好的安全性。现在用户通过Chrome、IE 11、Safari 8和Beta版本的Firefox进行浏览的时候都默认使用HTML5视频播放...
2015-11-12
从2014年的发展来展望JS的未来将会如何
<font face="寰�杞�闆呴粦, Arial, sans-serif ">2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
ajax为什么令人惊异?ajax的优缺点
使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息。 Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像DHT...
2015-11-12
HTML5的5个不错的开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
2015-11-12
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
AJAX的浏览器支持
AJAX 的要点是 XMLHttpRequest 对象。 不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。 IE 浏览器使用 ActiveXObject,而其他的浏览器使用名为 XMLHttpRequest 的 Jav...
2015-11-12
回到顶部