浅谈axios

简单讲些axios的简单应用，具体使用可以参考axios中文文档https://www.kancloud.cn/yunye/axios/234845

const Axios = require('axios')

1.这是文档指出的axios的支持的调用方法：

axios.request(config)

axios.get(url[, config])

axios.delete(url[, config])

axios.head(url[, config])

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

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

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

并发

处理并发请求的助手函数

axios.all(iterable)

axios.spread(callback)

创建实例

可以使用自定义配置新建一个 axios 实例

axios.create([config])

var instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

实例的方法和axios的方法一模一样，如上面调用就是使用instance.get这种

2.参数问题

1>.举例Axios.get(url[, config])

解释：这里表示第一个参数是请求的url，第二个参数可选，为一个配置对象，这个config对象在axios文档中有具体列举，对应设置就行

例子：我使用node的express框架抓取qq音乐的get接口

var express = require('express')

var app = express()

var Axios = require('axios')

Axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

app.get('/', function (req, res) {

       res.header("Access-Control-Allow-Origin", "http://127.0.0.1:5500") // 这里是因为本地起的服务是5500，而服务运行在3000，设置这个来解决跨域问题

const url = 'https://c.y.qq.com/v8/fcg-bin/fcg_v8_album_info_cp.fcg?ct=24&albummid=004K3LHV3ht6pl&g_tk=13876210&loginUin=944870787&hostUin=0&format=json&inCharset=utf8&outCharset=utf-8&notice=0&platform=yqq.json&needNewCode=0'

Axios.get(url, {

    headers: { // 这个不设置浏览器会报跨域错误

       referer: 'https://u.y.qq.com', //设置请求的来源

       host: 'u.y.qq.com'

   }

}).then((response) => {

      res.json(response.data);

}).catch((e) => {

        console.log(e);

     })

})

app.listen(3000)

2>.Axios.post(url[, data[, config]])

解释：第一个参数是请求url（必填），第二个参数是请求参数（可选），第三个参数是配置对象config(可选)

例子：我使用node的express框架抓取qq音乐的post接口(跟上面例子一样的地方省略了)

Axios.post('https://u.y.qq.com/cgi-bin/musicu.fcg?g_tk=5381',{

     "comm":{

         "uin":"0","ct":"24","cv":"0","gzip":"0","mcc":"460","mnc":"1"

      },

     "data_id":{

        "module":"track_info.UniformRuleCtrlServer",

        "method":"GetTrackInfo",

        "param":{

              "ids":[232263711],

                "types":[0]

          }

     }

},

{

     headers: {

          referer: 'https://u.y.qq.com',

          host: 'u.y.qq.com'

      }

}

).then(response => {

      res.json(response.data);

}).catch(err => {

      console.log(err)

})

3>.Axios.request(config)最后这种写法

Axios({

      method: 'post',

      url: 'https://u.y.qq.com/cgi-bin/musicu.fcg?g_tk=5381',

     data: {

     "comm":{

          "uin":"0","ct":"24","cv":"0","gzip":"0","mcc":"460","mnc":"1"

      },

      "data_id": 

            {

               "module":"track_info.UniformRuleCtrlServer",

               "method":"GetTrackInfo","param":{"ids":[232263711],"types":[0]}

            }

},

    headers: {

         referer: 'https://u.y.qq.com',

         host: 'u.y.qq.com'

    }

}).then(response => {

      res.json(response.data);

}).catch(err => {

      console.log(err)

})

根据实际情况选择适合的方式就好

axios还有默认配置：

全局的 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

 

拦截器

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

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

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

 

以上就是基本就是我所用到的一些axios的用法