axios基础

axios的基本特性

axios是一个基于Promise用于浏览器和node.js的HTTP客户端

它具有以下特征：

1. 支持浏览器和node.js
2. 支持promise
3. 能拦截请求和响应
4. 自动转换JSON数据

功能特点：

1. 在浏览器中发送XMLHttpRequests请求
2. 在node.js中发送http请求
3. 支持Promise API
4. 拦截请求和响应
5. 转换请求和响应数据

支持多种请求方式:

​ axips(config)

​ axios.request(config)

​ axios.get(url[ config])

​ axios.delete(url[ config])

​ axios.head(url[ config])

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

​ axios.put(ur[, data[ config]])

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

axios的基本用法

axios.get('/adata')
    .then(ret=>{
        //data属性名称是固定的，用于获取后台响应的数据
        console.log(ret.data)
    })

axios常用的API

1.get 查询数据

2.post 添加数据

3.put 修改数据

4.delete 删除数据

axios的参数传递

1.GET传递参数

 // 通过URL传递参数
// 通过params选项传递参数（axios专门提供）
//传统url传参
axios.get('/adata?id=123')
    .then(ret=>{
    console.log(ret.data)
})

//Restful 形式传参
axios.get('/adata/123')
    .then(ret=>{
    console.log(ret.data)
	})
//通过params选项传递参数
axios.get('/adata',{
    params:{
        id:123
    }
})
    .then(ret=>{
    	console.log(ret.data)
	})

2.DELETE传递参数

​

// 参数传递方式与GET类似
axios.delete('/adata?id=123')
    .then(ret=>{
    console.log(ret.data)
})
axios.delete('/adata/123')
    .then(ret=>{
    console.log(ret.data)
})
axios.delete('/adata',{
    params:{
        id:123
    }
})
    .then(ret=>{
    	console.log(ret.data)
	})

3.POST传递参数

//通过选项传递参数（默认传递的是json格式的教程）
axios.post('/adata',{
    uname:'tom',
    pwd:123
}).then(ret=>{
    console.log(ret.data)
})
// 通过URLSearchParams传递参数（application/x-www-form-urlencoded）
const params=new URLSearchParams();
params.append('paraml','value1');
params.append('param2','value2');
axios.post('/api/test',params).then(ret=>{
    console.log(ret.data)
})

4.PUT传递参数

//参数传递方式与POST类似
axios.put('/adata/123',{
    uname:'tom',
    pwd:123
}).then(ret=>{
    console.log(ret.data)
})

axios的响应结果

响应结果的主要属性
data:实际响应回来的数据

​ headers:响应头信息

​ status:响应状态码

​ statusText:响应状态信息

​ axios.post('/axios-josn').then(ret=>{
​ console.log(ret)
​ })

axios的全局配置

axios.default.timeout=3000;//超时时间
axios.default.baseURL='http://localhost:3000/app'//默认地址
axios.default.headers['mytoken']='hello';//设置请求头  (需要后台进行配置)

栗子：

//配置请求的基本url地址
axios.defaults.baseURL = 'http://localhost:3000/'
axios.get('axios-json').then(function(ret) {
    console.log(ret.data)
})

axios拦截器

1.请求拦截器

//在请求发出之前设置一些信息
// 添加一个请求拦截器
axios.interceptors.request.use(function(config){
    //在请求发出之前进行一些信息设置
    return config;
},function(err){
    //处理响应的错误信息
})

栗子：

axios.interceptors.request.use(function(config){
    console.log(config.url);
    config.headers.mytoken('nihao');
    return config; //必须将配置信息return出去
},function(err){
    console.log(err)
})
axios.get('http://localhost:3000/adata').then(function(data){
    console.log(data)
})

2.响应拦截器

//在获取数据之前对数据做一些加工处理
// 添加一个响应拦截器
 axios.interceptors.response.use(function(res){
     //在这里对返回的数据进行处理
     return res;
 },function(err){
     //处理响应的错误信息
 })

栗子：

axios.interceptors.response.use(function(res){
     //console.log(res);  //不是实际的数据 是对象
     var data = res.data; //这个是 实际的数据
     return data; //必须将配置信息return出去
},function(err){
     console.log(err)
})
axios.get('http://localhost:3000/adata').then(function(data){
     console.log(data)
})