axios的用法

axios的最基本用法

• 首先得需要axios的js文件，在官网下载dist文件夹里有
• axios的一个API，get()里面是url
• 然后用.then()
• then的参数方法需要一个参数，用参数.data获取数据
• 这个data属性是固定的，不能改

axios.get('http://localhost:3000/axiosdata').then(ret=>{
           console.log(ret.data);//这个data固定
       })

axios的常用API传递参数

GET传递参数

第一种 通过url传

• url中加?id=123
• 后台用req.query.id接收

第二种 通过url斜杠传

• url中加/123
• 后台用req.params.id接收且后台的url必须加/:id

第三种 通过axios.get的第二个参数对象属性params传(比较好)

• 第二个参数即url后面加一个参数，是对象，里面还有一个param对象，里面就是很多键值对
• 后台是用req.query.id接收

    axios.get('http://localhost:3000/axiosdata',{
           params:{
            id:123,
            name:lisi
           }
       }).then(ret=>{
           console.log(ret.data);
       })

DELETE传递参数

与GET一样

POST传递参数

默认传json格式的数据

• axios.post第二个参数直接是一个json对象
• 后台要用req.body.uname来接收

    axios.post('http://localhost:3000/axiosdata',{
            id:123,
            name:lisi
       }).then(ret=>{
           console.log(ret.data);
       })

若要传其他形式的

• 要new一个URLSearchParams()
• 用append('key','value')添加键值对数据
• axios.post第二个参数是这个new出来的对象

        const params = new URLSearchParams();
        params.append('uname','lisi');
        params.append('pwd', '123');
        axios.post('http://localhost:3000/axiosdata',params)//第二个参数是new的params对象
       .then(ret=>{
           console.log(ret.data);
       })        

PUT传递参数

• 与POST一样
• 但在axios.put的url参数后面加/123类似的的index让程序知道你修改的是哪个数据

axios的全局配置

设置超时时间

用axios.defaults.timeout = 3000

设置默认基准地址

• 用 axios.defaults.baseURL = 'http://localhost:3003'

• 之后用axios.get('xxx')的话，xxx会自动拼接默认基准地址

设置请求头

用axios.defaults.headers['mytoken']='xxx'
暂时不太明白意义

axios拦截器

1.请求拦截器

可以在请求发出之前设置一些信息

• 使用axios.interceptors.request.use()
• 两个参数函数
• 第一个的参数是config，函数体是对请求进行一些设置，例如设置请求头token，记住最后要返回config
• 第二个的参数是err，函数体是处理错误信息

    axios.interceptors.request.use(function (config) {
            config.hearders.mytoken = 'nihao';//设置请求头
            return config;
       },function (err) {
           console.log(err);
       });
       axios.get('http://localhost:3000').then(function (data) {
           console.log(data.data);
       })

2.响应拦截器

在获取数据之前可以设置数据信息

• 使用axios.interceptors.response.use()
• 同样是两个参数函数
• 第一个函数的参数名随意ret，就代表获取的对象
• return 出去的东西就是axios.then(function(ret){ })的ret

axios.interceptors.response.use(function (ret) {
            var data = ret.data;
            return data;
        },function (err) {
            console.log(err);
        })
        axios.get('http://localhost:3000').then(data=>{
            console.log(data);
        })