Nodejs——axios请求接口及拦截器使用

一、关于axios的使用

安装依赖：npm install --save axios

api 可以参考 https://www.npmjs.com/package/axios

以下针对 https://blog.csdn.net/wx19900503/article/details/101775442 文中的接口服务，写了几种请求样例

const axios =require('axios')

//get path
axios.get('http://localhost:3000/testGet/demo1')
.then((response) => {
  console.log(response.data)
})
.catch(function(error) {
  console.log(error)
})
//输出：userid:demo1

//get path
axios.get('http://localhost:3000/testGet?userid=demo2')
.then((response) => {
  console.log(response.data)
})
.catch(function(error) {
  console.log(error)
})
//输出：userid:demo2

//get params
axios.get('http://localhost:3000/testGet', {
  params: {
    userid:"demo3"
  }
})
.then(function (response) {
  console.log(response.data);
})
.catch(function (error) {
  console.log(error);
})
.then(function () {
  // always executed
});  
//输出：userid:demo3

//json post
axios.post('http://localhost:3000/testPost', {
  "username":"aaa",
  "password":"bbb" 
  })
  .then((response) => {
    console.log(response.data)
  })
  .catch(function(error) {
    console.log(error)
  })

//输出：{ myName: 'aaa', myPassword: 'bbb' }

//json header post
axios({
    url: 'http://localhost:3000/testPost',
    method: 'post',
    data: {
      "username":"aaa",
      "password":"bbb" 
    },
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept',
      'Content-Type':	'application/json',
      'Accept-Language':	'zh-cn'
    }
  })
  .then((response) => {
      console.log(response.data)
    })
    .catch(function(error) {
      console.log(error)
})
//输出：{ myName: 'aaa', myPassword: 'bbb' }

二、axios拦截器的使用

vue每次请求如果都需要携带token，并且进行某些异常判断就需要统一请求处理方式，所以需要拦截器去统一操作

1、新建requests.js

import axios from 'axios'
import { Message, MessageBox ,Loading} from 'element-ui'
import store from '../store'
import { getToken } from '@/utils/auth'

// 创建axios实例
const service = axios.create({
  baseURL: 'http://localhost:3000', //在config-dev.env.js中设置 可以process.env.BASE_API
  timeout: 5000 // 请求超时时间
})
let loadingInstance;
// request拦截器
service.interceptors.request.use(
  config => {
    loadingInstance  = Loading.service({ //加载loading
      fullscreen: true, 
      text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)' 
      });
    if (store.getters.token) { //vuex 管理token 后面在学习
     config.headers['X-Token'] = getToken() // 让每个请求携带自定义token
    //加上headers的属性
    config.headers['Access-Control-Allow-Origin'] = '*';
    config.headers['Access-Control-Allow-Headers'] = 'Origin, X-Requested-With, Content-Type, Accept';
    config.headers['Content-Type'] = 'application/json';
    config.headers['Accept-Language'] = 'zh-cn';

    return config
  },
  error => {
    // 请求失败情况
    console.log(error)
    Promise.reject(error)
  }
)

// response 拦截器
service.interceptors.response.use(
  response => {
      loadingInstance.close();
      //  接口请求成功，业务层逻辑处理 
      console.log(response.data)
      console.log(response.data.code)
      switch (response.data.code) {
        case 20001: //业务逻辑错误
          // 清除token，后续集成vuex进行管理
          //弹出消息
          Message({
          message: '系统错误',
          type: 'error',
          duration: 5 * 1000
         })
          return Promise.reject('error')
        case 20002://若20002定义为token过期
            //弹出消息框
            MessageBox.confirm( //element-ui 弹窗
              '你的登录已过期，请重新登录',
              '确定登出',
              {
                confirmButtonText: '重新登录',
                cancelButtonText: '取消',
                type: 'warning'
              }
            ).then(() => {
             //后面 vuex 清除token 跳转到登录页面
            }).catch(() => {
            }); 
            return Promise.reject('error')
        case 20000:
          return response.data
      }
    },
  error => {
    loadingInstance.close();
    console.log('err' + error)
    MessageBox({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service

2、封装拦截器的请求

新建testapi.js

import service from '../test/requests'

export function testGet(userid) {
  return service({
    url: '/testGet',
    method: 'get',
    params: { userid }
  })
}

export function testPost(username,password) {
  return service({
    url: '/testPost',
    method: 'post',
    data: {
      username,
      password
    }
  })
}

3、在vue里面调用

<script>
import { testGet, testPost } from '@/test/testapi'
export default {
  data() {
    return {
      tableData: []
    }
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row)
      this.form = row
    },
    Test() {
      testPost('aaa', 'bbb').then((response) => {
        console.log(response.data)
      })
        .catch(function(error) {
          console.log(error)
        })
    },
    Test1() {
      testGet('userid').then((response) => {
      })
        .catch(function(error) {
          console.log(error)
        })
    }
  }
}
</script>

三、修改service返回错误码，并延迟5秒返回，测试拦截器效果

//请求参数为 {"username":"aaa","password":"bbb" }
//demo:http://localhost:3000/testPost
app.post('/testPost', function(req, res) {
 var resname= req.body.username
 var respassword=  req.body.password
 setTimeout(() => {
  return res.send({'code':20002, 'myName': resname, 'myPassword': respassword })
  }, 5000);
    //return res.send({'code':20002, 'myName': resname, 'myPassword': respassword })
})

页面请求显示：