axios 使用总结

Posted 2021-09-23 在奋斗的大道

功能简介：

axios是第三方封装库，作用是在框架中使用数据请求

安装：

 npm install axios –S

在Vue 项目文件中的main.js 文件，定义axios请求类的全局引用。核心代码如下

 特点：

1. 它在浏览器中创建的是浏览器对象

2. 它底层是用Node.js中的http模块实现的

3. 支持Promise

4. 可以拦截请求和响应

      功能： loading加载效果、登录拦截

5. 转换请求和响应数据

6. 自动转换为JSON数据

7. 客户端支持防止XSRF 

 8. axios会自动封装数据

功能请求：

get 请求带参：

axios.get('./***/', params:{'参数':'值'}).then( res => {
  console.log( res )
 }).catch( err => console.log( err ))}

axios({
   url: ` `,
  method: 'GET',//默认就是get请求，这个可以不写
  params: {
 	参数: 值,
  } }).then( res => {
    console.log( res )
  }).catch( err => console.log( err )) }

 

get 请求不带参：

axios.get('./***/').then( res => {
  console.log( res )
 }).catch( err => console.log( err ))}

get请求携带参数用params 

post请求必须先设置请求头:

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

post 请求:

const p = new URLSearchParams() 
p.append( 参数，参数值 )

axios({
  url: `${ DEV_BACK_URL }/register`,
  data: p,// post请求携带参数的配置项
  method: 'POST'
}).then( res => console.log( res ))
 .catch( err => console.log( err ))

post请求携带参数的用data，用p.append添加参数

axios 请求封装：request.js

import { Message, MessageBox } from "element-ui";
import axios from 'axios';

const service = axios.create({
    baseURL: 'http://192.168.1.74:8081/crm',
    timeout: 15000  // 请求超过15秒就报错
  })

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
  // request拦截器
service.interceptors.request.use(config => {
  
    return config
  }, error => {
    // 当请求错误时
    console.log(error)
    Promise.reject(error)
  })
  
  // response拦截器
  service.interceptors.response.use(
    response => {
      const res = response.data
      // if !200 start
      if (res.code !== 200) {
        Message({
          message: res.massage,
          type: 'error',
          duration: 3 * 1000
        })
  
        // code = 401 表示未登录
        // if 401 start
        if (res.code === 401) {
          MessageBox.confirm('登录失效，请重新登录', '确认登出', {
            confirmButtonText: '重新登录',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            
          })
        } // if 401 end
        return Promise.reject('error')
      } else { // if !200 end
        return response.data
      }
    }, // response end
  
    error => {
      console.log('err' + error)
      Message({
        message: error.message,
        type: 'error',
        duration: 3 * 1000
      })
      return Promise.reject(error)
    }
  )
  
  export default service

实例：依赖request.js 实现get 和post 参数请求后台接口地址：

user.js 和state.js

import request from '@/utils/request'

export function getUserList(data) {
    return request({
      url: '/user/page',
      method: 'post',
      data
    })
  }

import request from '@/utils/request'

export function getStateList(params) {
    return request({
      url: '/state/page',
      method: 'get',
      params
    })
  }

效果展示：