axios

安装

npm install axios

使用axios发送get/post请求

/**
 * 使用get请求
 */
axios({
    url:'http://httpbin.org/user',
    params:{
        name:'kjh',
        age:29
    },
    method:'get'
}).then(
    res => console.log(res)
).catch(
    err => console.error(err)
)

 /**
 * 使用post请求
 */
axios({
    url:'http://httpbin.org/user',
    data:{
        name:'123',
        time:'2019-09-09'
    },
    method:'post'
}).then(
    res => console.log(res)
).catch(
    err => console.error(err)
)

axios的基本使用(await/async)

async componentDidMount(){
  try {
      const result = await axios({
          url:'http://httpbin.org/user',
          params:{
              name:'123',
              age:20
          }
      })

      console.log(result)
  } catch(error){
      console.log(error)
  }
}

axios配置全局baseUrl以及默认配置

//引入axios配置全局axios
import axios from 'axios'
axios.defaults.baseURL = 'https://httpbin.org';
axios.defaults.timeout = 5000;

使用：

async componentDidMount(){
  try {
      const result = await axios({
          url:'/user',
          params:{
              name:'123',
              age:20
          }
      })

      console.log(result)
  } catch(error){
      console.log(error)
  }
}

axios拦截请求

//添加拦截
instance.interceptors.request.use(config => {
    console.log('请求被拦截')
    return config
},error => {

})

instance.interceptors.response.use(res => {
    
    return res.data
},error => {
    return error;
})

二次封装axios

专门新建一个文件夹：service/request.js

• config.js

const devBaseURL = 'https://httpbin.org';
const proBaseURL = 'https://production.org';


export const BASE_URL = process.env.NODE_ENV === 'development' ? devBaseURL: proBaseURL;

export const TIMEOUT = 5000;

• request.js

import axios from 'axios';

import { BASE_URL, TIMEOUT} from './config';

const instance = axios.create({
    baseURL:BASE_URL,
    timeout:TIMEOUT
})

//添加拦截
instance.interceptors.request.use(config => {
    console.log('请求被拦截')
    return config
},error => {

})

instance.interceptors.response.use(res => {
    
    return res.data
},error => {
    return error;
})

export default instance;