前端学习之axios

axios基本使用

1、安装npm install axios --save

2、配置

import axios from "axios";

3、使用

• 在组件中

  getSongs() {
      this.$axios('http://api.javaswing.cn/top/playlist').then(res => {
          this.songs = res.data.playlists;
          console.log(this.songs);
      })
  },
  

• 在main.js中

  axios({
      // url: "httpbin.org/"
      url: "http://api.javaswing.cn/top/playlist"
  }).then(res => {
      console.log(res)
  })
  

axios发送并发请求

//axios发送并发请求
axios.all([axios({
    url: "http://api.javaswing.cn/playlist/catlist",
}), axios({
    url: "http://api.javaswing.cn/top/playlist",
    //专门针对get请求的参数拼接
    params: {
        type: 'pop',
        page: 1
    }
})]).then(results => {
    console.log(results)
})

另一种写法

axios.all([axios({
    url: "http://api.javaswing.cn/playlist/catlist",
}), axios({
    url: "http://api.javaswing.cn/top/playlist",
    //专门针对get请求的参数拼接
    params: {
        type: 'pop',
        page: 1
    }
})]).then(axios.spread((res1, res2) => {
    console.log(res1);
    console.log(res2);
}))

axios的配置信息相关

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CZhfAqgN-1604406114469)(C:\Users\12591\AppData\Roaming\Typora\typora-user-images\image-20201014202303613.png)]

//全局配置
//baseURL:请求根路径
axios.defaults.baseURL = "http://api.javaswing.cn"
//timeout：延时
axios.defaults.timeout = 5000

常见配置选项
请求地址
url:''
请求根路径
baseURL
请求前的数据处理
transformRequest:[function(data){}]
请求后的数据处理
transformRespinse:[function(data){}]
自定义的请求头
headers:{}
URL查询对象
params:{}

axios的实例和模块封装

创建一个新的文件夹network，(request.js)里面专门放置axios实例

export function request(config) {
    //1、创建axios的实例
    const inatance = axios.create({
            baseURL: "http://api.javaswing.cn",
            timeout: 5000
        })
        //发送真正的网络请求
    return inatance(config)
}

如在mian.js中要使用的话

import { request } from "./network/request.js"

request({
    url: "/top/playlist"
}).then(res => {
    console.log(res);
}).catch(err => {
    console.log(err);
})

axios的拦截器的使用

export function request(config) {
    //1、创建axios的实例
    const inatance = axios.create({
        baseURL: "http://api.javaswing.cn",
        timeout: 5000
    })

    //axios拦截器
    //请求拦截
    //1、比如config拿到的信息不符合服务器的要求
    //2、比如每次发送网络请求时，度希望在界面中显示一个请求的图标
    //3、某些网络请求（比如登录(token)),必须携带一些特殊信息
    instance.interceptors.request.use(config => {
            console.log(config);
            //拿到后返回
            return config;
        }, err => {
            console.log(err);
        })
    //响应拦截
    instance.interceptors.response.use(res => {
            console.log(res);
            return res.data
        }, err => {
            console.log(err);
        })
        //发送真正的网络请求
    return inatance(config)
}

onsole.log(res);
return res.data
}, err => {
console.log(err);
})
//发送真正的网络请求
return inatance(config)
}