美文网首页
axios使用教程

axios使用教程

作者: 光头小青蛙 | 来源:发表于2019-07-09 22:33 被阅读0次

    Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。主要使用在vue项目中发网络请求。

    • 安装可以使用npm,cnpm或者yarn(需要电脑安装node.js)。
    cnpm install axios
    
    • 在vue项目中引入
    import axios from 'axios';
    
    • 设置请求头
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
    
    • 设置Authorization(携带token)
    axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
    
    • 设置响应时间
    axios.defaults.timeout = 30 * 1000;
    
    • 请求拦截器
    axios.interceptors.request.use(function (config) {
        // 在发送请求之前做些什么
        return config;
      }, function (error) {
        // 对请求错误做些什么
        return Promise.reject(error);
      });
    
    • 响应拦截器,判断token是否过期。
    axios.interceptors.response.use(function (response) {
        // 对响应数据做点什么
        return response;
      }, function (error) {
        // 对响应错误做点什么
        return Promise.reject(error);
      });
    
    • get请求
     axios.get(url, {params: params})
          .then(res => {resolve(res.data)})
          .catch(err => {reject(err.data)});
    
    • post请求
     axios.post(url, params)
          .then(
            res => {
              resolve(res.data)
            },
            err => {
              reject(err.data)
            }
          )
          .catch(err => {
            reject(err.data)
          });
    
    • 将axios的api挂载到vue原型对象中,就可以通过this.$api.方法名发起请求
    import api from './api/api';
    Vue.prototype.$api = api;
    

    axios文档https://www.kancloud.cn/yunye/axios/234845

    相关文章

      网友评论

          本文标题:axios使用教程

          本文链接:https://www.haomeiwen.com/subject/mhkqkctx.html