vue之交互Axios(九)

一、axios 简介

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：

1、从浏览器中创建 XMLHttpRequest
2、从 node.js 发出 http 请求
3、支持 Promise API
4、拦截请求和响应
5、转换请求和响应数据
6、取消请求
7、自动转换JSON数据
8、客户端支持防止 CSRF/XSRF

二、下载安装

//npm安装
npm install axios --save

//cdn安装
<script type="text/javascript"  src="axios.js"></script>

三、发送请求

<1>get 请求

axios.get('/list?id=1').then(function (res) {
    console.log(res);
}).catch(function (error) {
    console.log(error);
 });

//以上请求也可以像如下方式写
axios.get('/user', {
    params: {
      id: 1
    }
  }).then(function (response) {
       console.log(response);
  }).catch(function (error) {
    console.log(error);
  });

<2>post请求

axios.post('/list', {
    username: 'tom',
    password: '123456'
  }).then(function (res) {
    console.log(res);
  }).catch(function (error) {
    console.log(error);
  });

<3>通用请求

   axios({
      url:"/list",
      methodl:"get",
      params:{
           id:1
      }
   }).then((res)=>{
         console.log(res)
   }).catch((error)=>{
        console.log(error)
   })

<4>并发请求

function getHomeList() {
     return axios.get('/list/1');
}
 
function getHomeData() {
    return axios.get('/list/1');
}
 
axios.all([getHomeList(),getHomeData()])
.then(axios.spread(function (acct, perms) {
    //两个请求现已完成
}));

三、请求方法别名

为了方便起见，已经为所有支持的请求方法提供了别名。

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]]）

四、创建实例

//create创建一个新的实例对象
var instance = axios.create({
   url: 'http://localhost:3000',
   imeout: 3000,
   method: 'post'
});
//即可调用方法，和axios实例同
instance.get('http://localhost:3000').then(res=>{
   console.log(res);
});

五、默认配置

//全局默认配置
axios.defaults.baseURL = 'http://localhost:3000/';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['content-Type'] = 'appliction/x-www-form-urlencoded';

//自定义实例默认配置
//当创建实例的时候配置默认配置
var instance = axios.create({
    baseURL: 'http://localhost:8080/'
});
//当实例创建时候修改配置
instance.defaults.headers.common["Authorization"] = AUTH_TOKEN;

六、拦截器

//添加一个请求拦截器
axios.interceptors.request.use(function(config){
  //在请求发出之前进行一些操作
  return config;
},function(err){
  //Do something with request error
  return Promise.reject(error);
});
//添加一个响应拦截器
axios.interceptors.response.use(function(res){
  //在这里对返回的数据进行处理
  return res;
},function(err){
  return Promise.reject(error);
})

2.取消拦截器
var myInterceptor = axios.interceptor.request.use(function(){/*....*/});
axios.interceptors.request.eject(myInterceptor);

3.给自定义的axios实例添加拦截器
var instance = axios.create();
instance.interceptors.request.use(function(){})

七、封装axios

import axios from 'axios'
import qs from 'qs'
import store from 'store/index'
import router from '../router'
import { Indicator, Toast } from 'mint-ui'
axios.defaults.timeout = 100000 // 请求超时时间
axios.defaults.baseURL = process.env.VUE_APP_BASE_API
// axios.defaults.baseURL = 'http://119.3.219.52:8080/firework'
// axios.defaults.headers.post['Content-Type'] =
    'application/x-www-form-urlencoded;charset=UTF-8' // post请求头的设置
// axios 请求拦截器
axios.interceptors.request.use(
    config => {
        // 可在此设置要发送的token
        let token = store.getters['login/token'];
        token && (config.headers.token = token)
        Indicator.open('数据加载中')
        return config
    },
    error => {
        return Promise.error(error)
    }
)
// axios respone拦截器
axios.interceptors.response.use(
    response => {
        // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
        // 否则的话抛出错误 结合自身业务和后台返回的接口状态约定写respone拦截器
        Indicator.close()
        if (response.status === 200 && response.data.code === 0) {
            return Promise.resolve(response)
        } else {
            Toast({
                message: response.data.msg,
                position: 'middle',
                duration: 2000
            });
            return Promise.reject(response)
        }
    },
    error => {
        Indicator.close()
        const responseCode = error.response.status
        switch (responseCode) {
            // 401：未登录
            case 401:
                break
            // 404请求不存在
            case 404:
                Toast({
                    message: '网络请求不存在',
                    position: 'middle',
                    duration: 2000
                });
                break
            default:
                Toast({
                    message: error.response.data.message,
                    position: 'middle',
                    duration: 2000
                });
        }
        return Promise.reject(error.response)
    }
)
/**
 * 封装get方法，对应get请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
function get (url, params = {}) {
    return new Promise((resolve, reject) => {
        axios
            .get(url, {
                params: params
            })
            .then(res => {
                resolve(res.data)
            })
            .catch(err => {
                reject(err.data)
            })
    })
    // 或者return axios.get();
}
/**
 * post方法，对应post请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
function post (url, params) {
    return new Promise((resolve, reject) => {
        axios
            .post(url, qs.stringify(params))
            .then(res => {
                // console.log(res)
                if(res.data.code==100){
                    store.commit('login/LOGOUT',{
                        $router:router,
                    })
                }
                resolve(res.data)
            })
            .catch(err => {
                resolve(err.data)
            })
    })
    //  或者return axios.post();
}
export { get, post }

如果感觉有帮助，请留下宝贵的赞，还可以赞赏一下！！！