Vue------第五天（Vue的Ajax请求，使用Axios,目前熟悉了一下，主要包括GET请求、POST请求、并发请求、请求参数的配置、服务器响应的结构以及对服务器响应错误的简单处理）

摘要: 努力是一个漫长的过程......

https://www.kancloud.cn/yunye/axios/234845

PS: 使用之前引入axios.js

1.Axios是一个基于promise的HTTP库，可以用在浏览器和node.js中

2.执行GET请求

axios.get('url').then(function(response){
console.log(response.data)
}).catch(function(error){
console.log(error.response)
})

3.执行POST请求

axios.post('url',{data数据}).then(function(response){
console.log(response.data)
}).catch(function(error){
console.log(error.response)
})

4.执行多个并发请求

处理并发请求的助手函数

axios.all(iterable)

axios.spread(callback)

function getUserAccount(){
return axios.get('url1')
}
function getUserPermissions(){
return axios.get('url2')
}
axios.all([getUserAccount(), getUserPermissions()]).then(axios.spread(function(acct, perm){
// 两个请求现在都执行完成
}))

5.axios API

(1)axios(config)

(2)axios(url[,config])

6.请求方法的别名

在使用别名方法时，url/method/data这些属性都不必在配置中指定

axios.request(config)

axios.get(url[,config])

axios.delete(url[,config])

axios.head(url[,config])

axios.post(url[,config])

axios.post(url[,data[,config]])

axios.put(url[,data[,config]])

axios.patch(url[,data[,config]])

7.创建实例

使用自定义配置创建一个axios实例

axios.create([config])

8.实例方法

6中的方法都可以被实例使用

9.请求配置

{
url: '',        // 必需
method: ''
baseURL: ''
// 对data进行任何转换处理
transformRequest: [function(data){

}],
// 对data进行任何转换处理
transformResponse: [function(data){

}],
// 即将被发送的自定义请求头
headers: {

},
// 即将与请求一起发送的URL参数
params: {

},
// 序列号params
paramsSerializer: function(params){

},
// 请求主体被发送的数据
data: {

},
// 请求超时时间
timeout:1000,
// 跨域请求是否需要使用凭证
withCredentials: false,
// 允许自定义处理请求
adapter: function(){

},
// 应该使用HTTP基础验证，并提供凭据
auth: {

},
// 服务器返回的数据类型
responseType: 'json',
// 用作xsfr token的值的cookie的名称
xsrfCookieName: 'XSFR-TOKEN',
// 承载xsfr token的值的HTTP头的名称
xsfrHeaderName: 'X-XSFR-TOKEN',
// 处理上传进度事件
onUploadProgress: function(progressEvent){

},
// 处理下载进度事件
onDownloadProgress: function(){

},
// 允许的响应内容的最大尺寸
maxContentLength: 2000,
// HTTP响应状态码
validateStatus: function(status){

},
// 最大重定向数目
maxRedirects: 5,
// 执行http/https时使用的自定义代理
httpAgent: new http.Agent({keepAlive: true}),
httpsAgent: new https.Agent({keepAlive: true}),
//代理服务器的主机名称和端口
proxy: {
host: '127.0.0.1',
port: 9000,
auth: {
username: '',
password: ''
}
},
// 指定用于请求的cancel token
cancelToken: new CancelToken(function(cancel){

})
}

10.响应结构

使用then时

axios.get('url').then(function(response){
console.log(response.data)          // 服务器返回的数据
console.log(response.status)        // 服务器返回的HTTP状态码
console.log(response.statusText)    // 服务器返回的HTTP状态信息
console.log(response.headers)       // 服务器的响应头
console.log(response.config)        // 请求提供的配置信息
})

11.错误处理

axios.get('url').catch(function(error){
if(error.response){
console.log(error.response.data)
console.log(error.response.status)
console.log(error.response.headers)
}else {
console.log('Error', error.message)
}
console.log(error.config)
})