axios的基本使用

安装axios， npm install --save axios

用于发送请求，记得要对后台进行跨域访问进行处理，不然无法访问：

封装axios:

import Axios from 'axios'

/**
 * 第一种封装方式
 * @param config
 * @param success
 * @param err
 */
export function userServiceUrl(config, success, error) {

  const axiosInstance = Axios.create({
    baseURL: 'http://localhost:8080',
    timeout: 5000
  });

  axiosInstance(config).then(res => {
    success(res)
  }).catch(err => {
    error(err)
  })
}


/**
 * 第二种封装方式
 * @param config
 */
export function liveServiceUrl(config) {
  const axiosInstance = Axios.create({
    baseURL: 'http://localhost:8080',
    timeout: 3000
  })

  axiosInstance(config.baseConfig)
    .then(res => {
      config.success(res)
    })
    .catch(err => {
      config.err(err)
    })
}

/**
 * 第三种封装方式
 * @param config
 * @returns {Promise<unknown>}
 */
export function mngServiceUrl(config) {
   return new Promise((resolve, reject) => {
    const axiosInstance = Axios.create({
      baseURL: 'http://localhost:8080',
      timeout: 5000
    })
    axiosInstance(config).then(res => resolve(res)).catch(err => reject(err))
  })
}

/**
 * 第四种封装方式
 * @param config
 * @returns {AxiosPromise}
 */
export function newsServiceUrl(config) {
  const axiosInstance = Axios.create({
    baseURL: 'http://localhost:8080',
    timeout: 5000
  })

  return axiosInstance(config)
}

对封装的请求axios的使用:

userServiceUrl(
  {
    url: '/v1/hello'
  },
  res => {
    console.log(res)
  },
  err => {
    console.log(res)
  }
)

liveServiceUrl({
  baseConfig: {
    url: '/v1/hello'
  },
  success(res) {
    console.log(res)
  },
  err(err) {
    console.log(err)
  }
})

mngServiceUrl(
  {
    url: '/v1/hello'
  }
).then(res => {
  console.log(res)
}).catch(err => {
  console.log(err)
})

newsServiceUrl({
  url: '/v1/hello1'
}).then(res => {
  console.log(res)
}).catch(err => {
  console.log(err)
})

userServiceUrl(
  {
    url: '/v1/hello/detail',
    params: {
      id: 19
    },
    method: 'GET'
  },
  res => {
    console.log(res)
  },
  err => {
    console.log(res)
  }
)

userServiceUrl(
  {
    url: '/v1/hello/89',
    method: 'DELETE'
  },
  res => {
    console.log(res)
  },
  err => {
    console.log(res)
  }
)

userServiceUrl(
  {
    url: '/v1/hello',
    data: {
      name: 'jeffchan'
    },
    method: 'POST'
  },
  res => {
    console.log(res)
  },
  err => {
    console.log(err)
  }
)