Xhr

标签：patch   选项   type   status   more   attr   成功   ack   信息   

xhr Learning 续

2、Axios

Axios文档

• 定义：Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中
• 安装：$ npm install axios
• 引入： import axios from 'axios'
  cdn： https://unpkg.com/axios/dist/axios.min.js

使用
1）get请求

1
2
3
4
5
6
7

axios.get('/api/articles?type=more&category=home&shown_offset=1540351013034122&first_view=false')
.then(function(res){
	console.log(res)
})
.catch(function(error){
	console.log(error)
})

2）post请求

1
2
3
4
5
6
7
8
9
10
11

axios.post('/api/v4/articles/45395824/voters',{
	params:{
	  voting:1
	}
})
.then(function(res){
	console.log(res)
})
.catch(function(error){
	console.log(error)
})

3）执行多个并发请求

1
2
3
4
5
6
7
8
9
10
11

function  (){
	return  axios.get('/api/articles?type=more&category=home&shown_offset=1540351013034122&first_view=false')
}
function  getCareerArticle(){
	return  axios.get('/api/articles?type=more&category=career&shown_offset=1540450144315916')
}
axios.all([getHomeArticle(),getCareerArticle()])
.then(axios.spread(function(home,career){
	console.log(home)
	console.log(career)
}))

axios.all(iterable) axios.spread(callback)

4）axios(url[, config])

1
2
3
4
5
6
7
8

axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

——请求方法的别名

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

在使用别名方法时， url、method、data 这些属性都不必在配置中指定
若想指定其他参数，可以使用实例方法如：axios#post(url[, data[, config]])

5）响应结构

1
2
3
4
5
6
7

{
  data: {},          
  status: 200,       // `status` 来自服务器响应的 HTTP 状态码
  statusText: 'OK',  // `statusText` 来自服务器响应的 HTTP 状态信息
  headers: {},       // `headers` 服务器响应的头
  config: {}         // `config` 是为请求提供的配置信息
}

6）配置的默认值/defaults

1
2

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

配置的优先顺序：库的默认值 < 实例的 defaults 属性 < 请求的 config 参数

7）错误处理

1
2
3
4
5
6
7
8
9
10
11

axios.get('/user/12345')
  .catch(大专栏  Xhrn class="keyword">function (error) {
    if (error.response) {
      // 请求已发出，但服务器响应的状态码不在 2xx 范围内
      console.log(error.response)
    } else {
      // Something happened in setting up the request that triggered an Error
      console.log('Error', error.message);
    }
    console.log(error.config);
  });

• 可以使用 validateStatus 配置选项定义一个自定义 HTTP 状态码的错误范围

  1 2 3 4 5

  axios.get('/user/12345', { validateStatus: function (status) { return status < 500; // 状态码在大于或等于500时才会 reject } })

• kidish的封装：

  1 2 3

  .catch(e => { e.response ? cb(e.response) : cb({status: 500,data:{result: 'errInter'}}) })

3、jQuery中的Ajax

jQuery.ajax( url [, settings ] )
中文文档 settings参数及设置

1
2
3
4
5
6
7

$.ajax({url:  "api/articles?type=more&category=home&shown_offset=1540351013034122&first_view=false",
	contentType:  "application/json"
}).done(function(res){
	console.log(res);
}).fail(function(){
	console.log("Error: " + err.status);
})

• jQuery.get( url [, data ] [, success ] [, dataType ] )

• [, success ] 为当请求成功时运行的函数

  1 2 3 4 5 6 7

  var data = {voting:1} data = JSON.stringify(data) $.post('/api/v4/articles/45395824/voters',{data}, function(data,status){ console.log("Data: " + data + "nStatus: " + status); },"json" );

• jQuery.get( url [, data ] [, success ] [, dataType ] )

  1 2 3 4 5 6

  $.get('api/articles?type=more&category=home&shown_offset=1540351013034122&first_view=false', function(data,status){ console.log(data) console.log(status) //success } );

更多使用，总感觉用到了才知道。。。。。。

4、番外

Fetch
Fetch 是浏览器提供的原生 AJAX 接口。
XMLHttpRequest不符合关注分离原则，且基于事件的异步模型写起来也没有现代的 Promise，generator/yield，async/await 友好,因此Fetch出现正是来解决这一问题。

• Fetch 优点主要有：

  1. 语法简洁，更加语义化
  2. 基于标准 Promise 实现，支持 async/await
  3. 同构方便，使用 isomorphic-fetch

• 缺点：浏览器支持率不高

• 使用:
  安装：npm install whatwg-fetch --save
  为了兼容老版本的浏览器，还需要安装 npm install es6-promise --save
  引入：

  1 2	import 'whatwg-fetch' import 'es6-promise'

  ! Fetch 请求默认是不带 cookie 的，需要设置 fetch(url, {credentials: 'include'})
  基本写法参考：参考学习文章

• 其余学习参考
  参考学习文章:传统 Ajax 已死，Fetch 永生
  参考学习文章:什么是Fetch

目前还未应用，暂时做一个了解，后续待深入学习~

Xhr

标签：patch   选项   type   status   more   attr   成功   ack   信息   

原文地址：https://www.cnblogs.com/lijianming180/p/12360908.html