Axios

Axios 一个基于 promise 的 Http 库，可以用于浏览器和 node.js;

1.GET 请求

axios.get('/user?id=123').then((res)=>{
    console.log(res);
}).catch((error)=>{
    console.log(error)
});

//另一种写法

axios.get('/user',{
    params:{
        id:123
    }
}).then((res)=>{
    console.log(res)
}).catch((error)=>{
    console.log(error)
})

2.POST 请求

axios.post('/user',{
    firstName:'Fred',
    lastName:'Flintstone'
}).then((res)=>{
    console.log(res)
}).catch((error)=>{
    console.log(error)
});

3.执行多个并发请求

getUserAccount(){
    return axios.get('/user/12345')
}

getUserPermissions(){
    return axios.get('user/12345/permissions')
}

axios.all([getUserAccount(),getUserPermissions()]).then((res)=>{
    axios.spread((acct,perms)=>{
        //现在两个请求都执行完毕
    })
})

4.axios API

• 可以通过向 axios 传递相关配置来创建请求
• axios(config)

//发送POST请求

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

//获取远端图片

axios({
    method:'get',
    url:'http://bit.ly/2mTM3nY',
    responseType:'stream'
}).then((res)=>{
    res.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
})


//axios(url[,config])
//发送GET请求
axios('/user/12345')

5.请求配置

{
//’url‘ 用于请求服务器的URL
url:'user',

//‘method‘ 是创建请求的方法,默认是get请求
method:'get',

// ‘baseURL’ 将自动加在 ’url‘前面 ，除非’url‘是一个绝对路径
// 便于为axios实例方法传递相对URL
baseURL:'https://some-domain.com/api/',


//'transformRequest' 允许再向服务器发送前，修改请求数据;
//只能用在 ’PUT‘ ’POST‘ 和 ’PATCH‘ 这几个请求方法；
//后面的数组中的函数必须返回一个字符串，或 ArrayBuffer 或 Stream

transformRequest:[function(data,headers){
    //对data 进行任意转换处理
    return data;
}]

// 'transformResponse' 在传递给 then/catch 前，允许修改相应数据
transformResponse:[function(data){
    //对 data 进行任意转换处理
    return data;
}]


// 'headers' 是即将发送对的自定义请求头
headers:{'X-Requested-With':'XMLHttpRequest'},


// 'params' 是即将与请求一起发送的URL参数
params:{
    id:1234
}


// 'data' 是作为请求主体被发送的数据
// 只适用于 ’PUT‘ ’POST‘ 和 ’PATCH‘ 请求
data:{
    firstName:'Fred'
}

// 'timeout' 指定请求超时的毫秒数（0表示无超时时间）;
// 如果请求超过 ’timeout‘ 的时间 请求将被中断；
timeout:1000,


// 'withCredentials' 表示跨域请求时是否需要使用凭证
withCredentials:false,//default

// 'auth' 表示应该使用 Http 基础验证 并提供凭证
// 这将设置一个 `Authorization` 头，覆写掉现有的任意使用 `headers` 设置的自定义 `Authorization`头
 auth: {
    username: 'janedoe',
    password: 's00pers3cret'
  },

// 'responseType' 表示服务器相应的数据类型，可以是 ’arraybuffer‘ 'blob' 'document' 'json' 'text' 'stream'
responseType:'json',//default

// 'onUploadProgress' 允许为上传处理进度事件
onUploadProgress:function(progressEvent){
    //处理你想处理的上传进度事件
}

// 'onDownloadProgress' 允许为下载处理进度事件
onDownloadProgress:function(progressEvent){
    //对原生进度事件的处理
}

// 'maxContentLength' 定义允许的响应内容的最大尺寸
maxContentLength:2000,

// 'proxy' 定义代理服务器的主机名称和端口号
// 'auth' 表示HTTP 基础验证应当用于连接代理，并提供凭证
// 这将会设置一个 ‘Proxy-Authorization’头，覆写掉已有的通过使用 `header` 设置的自定义 `Proxy-Authorization` 头。
proxy:{
    host:'127.0.0.1',
    port:9000,
    auth:{
        username:'mikeymike',
        password:'rapunz3l'
    }
}



}

6.响应结构

{
    // 'data' 服务器提供的响应
    data:{},

    // 'status' 来自服务器响应的HTTP状态码
    status:200,

    // 'statusText' 来自服务器响应的HTTP状态信息
    statusText:'OK',

    // 'headers' 服务器响应头
    headers:{},

    // 'config' 是为请求提供的配置信息
    config:{},

    // 'request'
    request:{}
}

• 使用 then 时，将接收下面这样的响应

axios.get('/user/12345').then((res)=>{

    console.log(res.data);
    console.log(res.status);
    console.log(res.statusText);
    console.log(res.headers);
    console.log(res.config);

});

7.配置默认值

• 全局 axios 默认值

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

• 自定义实例默认值

const instance = axios.create({
    baseURL:'https://api.example.com'
});

instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

8.拦截器

• 在请求或响应被 then 或 catch 处理前拦截它们

//  1.添加请求拦截器
axios.interceptors.request.use(function(config){
    //在发送请求之前做什么;
    return config;
},function(error){
    // 对请求错误做什么
    return Promise.reject(error);
})

//  2.添加响应拦截器
axios.interceptors.response.use(function(response){
    // 对响应数据做点什么
    return response;
},function(error){
    //对响应错误做什么
    return Promise.reject(error);
})

• 如果你想在稍后移除拦截器：

const myInterceptor = axios.interceptors.request.use(function(){});
axios.interceptors.request.eject(myInterceptor);

9.Axios请求时，params 和 data 的区别

• ①.params是添加到url的请求字符串中，用于get请求；(get请求中不存在data这个选项)
• ②.data是添加到请求体(body)中，用于post请求

转载于:https://my.oschina.net/ndweb/blog/3060724