vue_异步请求vue-resource和axios

vue-resource 和axios 异步请求插件

vue-resource npm安装

$ npm install vue-resource --save

请求方式

• get(url, [config])
• head(url, [config])
• delete(url, [config])
• jsonp(url, [config])
• post(url, [body], [config])
• put(url, [body], [config])
• patch(url, [body], [config])

config配置

参数	类型	描述
url	string	请求的url
method	string	请求的HTTP方法，GET,POST等
body	Object,FormaData,String	request body
headers	Object	request header
params	Object	请求的url参数对象
responseType	string	响应主体的类型（例如，文本，blob，json，...）
timeout	number	单位为毫秒的请求超时时间(0表示五超时时间)
credentials	boolean	表示跨域请求时是否需要凭证
emulateHTTP	boolean	使用HTTP POST发送PUT，PATCH和DELETE请求并设置X-HTTP-Method-Override标头
emulateJSON	boolean	发送请求正文作为application/x-www-form-urlencoded内容类型
before	function(request)	回调函数在发送请求对象之前对其进行修改
uploadProgress	function(event)	回调函数来处理上载的ProgressEvent
downloadProgress	function(event)	回调函数来处理下载的ProgressEvent

全局拦截器 interceptors

Vue.http.interceptors.push((request, next) => {
  // 请求发送前的处理逻辑
  // modify method
  request.method = 'POST';
  // modify headers
  request.headers.set('X-CSRF-TOKEN', 'TOKEN');
  request.headers.set('Authorization', 'Bearer TOKEN');

  next(response => {
    // ...
    // 请求发送后的处理逻辑
    // ...
    // 根据请求的状态，response参数会返回给successCallback或errorCallback
    return response
  })
});

使用

// vue-resource 挂载vue实例上，通过this.$http访问
this.$http.get(url,{
  params: {  // get传递参数，把参数拼接在url地址中
    userId: '0001'
  },
  headers: {
    token: 'jack'
  }
  // .....
}).then(data=> {.....}, err => {.......} )

this.$http.post(url, {
    // post传递参数方式，将数据打包在request body中
    userId: '0001',
    usename: 'tom'
  }, {  // 第三个参数是请求配置信息
    header: {token: 'abc'}
  }
}).then(data=> {.....}, err => {.......} )

this.$http({
  url: '....',
  method: 'get'['post'],
  params: {....}, get传递参数
  data: {....}, post传递参数
  // .....
}).then(data => {.....}, err => {.......})

axios npm安装

$ npm install axios --save

请求方式

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

请求config配置 更多配置信息查看

参数	类型	描述
url	string	请求的url地址
method	string	请求使用的方式，GET,POST等
baseURL	string	除非url地址是绝对的，否则baseURL将拼接到请求url地址之前
headers	Object	request header
params	Object	请求url的参数对象
data	string,Object,ArrayBuffer...	请求正文发送的数据，仅适用post，put，patch方法
timeout	number	超时时间
responseType	document,json,text...	服务器将响应的数据类型，默认json
response information
data	Object	服务器提供的响应数据
status	number	是服务器响应中的HTTP状态代码
statusText	string	服务器响应中的HTTP状态消息,ok等....
headers	Object	response header
body	Object	和data一样
bodyText	string	字符串的数据

使用
axios 暴露全局接口，是window对象

// get
axios.get(url, {
  params: {....},
  headers: {....}
  //....
})
.then(data => {...})
.catch(err => {...})
// post
axios.post(url, {
  username: 'jack'
}, {
  headers: {...}
})
.then(data => {...})
.catch(err => {...})

// axios(config)
axios({
  url: '...',
  method: 'post'['get'],
  data: {...}, // post请求传递参数
  params: {....}, // get请求传递参数
  headers: {.....}
})
.then(data => {...})
.catch(err => {...})
// axios.all
axios.all
let request1 = axios.get('one.json')
let request2 = axios.get('two.json')
let request3 = axios.get('three.json')
axios.all([request1, request2, request3])
// .then(axios.spread((one, two, three) => {
//   // 可以使用axios内置函数，替我们遍历并以参数返回相对应数据
//   console.log('one', one)
//   console.log('two', two)
//   console.log('three', three)
// }))

.then(([res1, res2, res3]) => { // 也可以使用结构赋值使用
    console.log('res1', res1)
    console.log('res2', res2)
    console.log('res3', res3)
})

axios 拦截器

// 请求前拦截
axios.interceptors.request.use(config => {
  // request init.....
  return config
}, err => {
  console.log(err)
})
// 响应前拦截
axios.interceptors.response.use(config => {
  return config
}, err => {
  console.log(err)
})