当前位置:   article > 正文

Vue基础篇-Ajax请求(axios)_在vue中如何用ajax发送请求

在vue中如何用ajax发送请求

1.基础知识

(a)vue2.0官方推荐使用axios,vue-resource是vue1.0时代的产物(已然下岗待业);

(b)Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中;

(c)axios基本功能包括:拦截请求和响应,转换请求数据,并发请求,取消请求,自转换JSON数据等;

(d)axios.js脚本文件需自行下载

2.基本语法

  1. //get请求
  2. axios.get('../data/getData',{
  3. params:{
  4. canshu001:2,
  5. canshu002:2
  6. }
  7. }).then(function(response){
  8. self.dataReturn=response.data;
  9. }).catch(function(error){
  10. console.log(error);
  11. });
  12. //post请求(注意的是传递参数的书写方法不同,没有params接受)
  13. axios.post('../data/getData',{
  14. canshu001:2,
  15. canshu002:2
  16. }).then(function(response){
  17. self.dataReturn=response.data;
  18. }).catch(function(error){
  19. console.log(error);
  20. });

3.并发请求

  1. function getUser1() {
  2. return axios.get('/user/12345');
  3. }
  4. function getUser2() {
  5. return axios.get('/user/12345/other');
  6. }
  7. axios.all([getUser1(), getUser2()])
  8. .then(axios.spread(function (reg1, reg2) {
  9. // 两个请求执行完成,reg1为getUser1返回的结果,reg2为getUser2返回的结果
  10. }));

4.axios的相关API

1)axios(config)   config就是配置项对象

  1. // 发送 POST 请求
  2. axios({
  3. method: 'post',
  4. url: '/user/12345',
  5. data: {
  6. firstName: 'Fred',
  7. lastName: 'Flintstone'
  8. }
  9. });

(2)axios(url[, config])    请求别名,各请求的简写模式

  1. axios.request({data:{"name":"yin"}}).then();
  2. axios.get("user/12345",{params:{"name":"yin"}}).then();
  3. axios.delete("user/12345",{params:{"name":"yin"}}).then();
  4. axios.head("user/12345",{params:{"name":"yin"}}).then();
  5. axios.post("user/12345",{"name":"yin"}).then();
  6. axios.put("user/12345",{"name":"yin"}).then();
  7. axios.patch("user/12345",{"name":"yin"}).then();

(3)并发请求    axios.all([ ])发送请求    axios.spread(callback)接受结果(详情看3)

(4)请求配置config(常用)

url请求地址-
method请求方式默认:get
data请求参数对象 
timeout超时毫秒数超出时间,请求将会中断
proxy代理服务器的主机名和端口提供允许访问的权限
cancelToken指定用于取消请求的 

(5)响应结果

data:{}返回结果
status:200状态码
statusText:'OK'状态信息
headers:{}响应头
config:{}请求时的配置项集合

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/很楠不爱3/article/detail/387387
推荐阅读
相关标签
  

闽ICP备14008679号