api封装使用

本文使用axios请求,先在require中配置服务器请求拦截,并添加token,本文模拟token添加1111,域名使用的本地域名,需要自己配置一下。token可以使用cookie,放入cookie中获取添加当请求头中。

import axios from 'axios'

// 创建axios对象
let service = axios.create({
  baseURL: 'http://127.0.0.1:3001', // 请求接口的域名
  timeout: 9000 // 请求的超时
})

// 添加请求拦截器,
service.interceptors.request.use(
  request => {
    // 设置请求的头信息
    request.headers = {
      token: `1111`, // 请求添加的token
      'Content-Type': 'application/json;charset=utf-8'
    }
    return request
  },
  error => {
    Promise.reject(error)
  }
)

// 添加响应拦截器
service.interceptors.response.use(
  response => {
    return response.data
  },
  error => {
    Promise.reject(error)
  }
)

export default service

2,创建一个接口文件,统一把接口放入这个js中,使用时直接拿取,合理运用封装模块

// 所有接口地址
export default {
  exhibitionHotUrl: '/api/exhibition/list',
}

3,封装api,使用直接拿取api请求

import requset from '../utils/request'
import apiUrl from '../utils/apiUrl'

// 获取数据
export const getExhibitionList = params => {
  return requset({
    url: apiUrl.exhibitionHotUrl,
    method: 'get',
    params
  })
}
}

4,最后页面使用可以使用

//获取
import {getExhibitionList} from '../../api/index'

getExhibitionHotList = async () => {

  // await 调用
  const result = await getExhibitionList({
  可以在这里写需要传递的参数
  })
  if (result.code === 200) {
    this.setState({
    //成功数据赋值
      exhibitionList: result.data.list
    })
  }
}
代码改变了我们,也改变了世界
原文地址:https://www.cnblogs.com/wencaiguagua/p/13670522.html