Vue 框架学习(十一) axios

1、请求方式

axios(config)

// 发送 POST 请求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

别名请求

axios.request(config)

//原始的Axios请求方式
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  },
  timeout: 1000,
  ...//其他相关配置
});

axios.get(url[, config])

axios.get('demo/url', {
    params: {
        id: 123,
        name: 'Henry',
    },
   timeout: 1000,
  ...//其他相关配置
})

 

axios.delete(url[, config])

//如果服务端将参数作为java对象来封装接受
axios.delete('demo/url', {
    data: {
        id: 123,
        name: 'Henry',
    },
     timeout: 1000,
    ...//其他相关配置
})
//如果服务端将参数作为url参数来接受，则请求的url为:www.demo/url?a=1&b=2形式
axios.delete('demo/url', {
    params: {
        id: 123,
        name: 'Henry',
    },
     timeout: 1000,
    ...//其他相关配置
})

axios.post(url[, data[, config]])

axios.post('demo/url', {
    id: 123,
    name: 'Henry',
},{
   timeout: 1000,
    ...//其他相关配置
})

 

axios.put(url[, data[, config]])

axios.put('demo/url', {
    id: 123,
    name: 'Henry',
},{
   timeout: 1000,
    ...//其他相关配置
})

axios.patch(url[, data[, config]])

axios.patch('demo/url', {
    id: 123,
    name: 'Henry',
},{
   timeout: 1000,
    ...//其他相关配置
})

参考文档：http://www.axios-js.com/zh-cn/docs/

 

2、网络模块的封装 

封装：

import axios from 'axios'

export function request(config) {
  // 1.创建axios实例
  const instance = axios.create({
    baseURL: 'http://123.207.32.32:8000',
    timeout: 5000
  })

  // 2.发送真正的网络请求
  return instance(config)
}

调用：

import {
  request
} from './request'

export function getHomeMultidata() {
  return request({
    url: '/home/multidata'
  })
}


export function getHomeGoods(type, page) {
  return request({
    url: '/home/data',
    method: 'get',
    params: {
      type,
      page
    }
  })
}

3、拦截器

// 拦截器
// 请求拦截
instance.interceptors.request.use(config => {
  console.log('success');
  // 等待图标，token验证等
  return config
}, err => {
  console.log('failed');
})
// 相应拦截
instance.interceptors.response.use(res => {
  console.log('success');
  // 这里可以进行数据处理，只返回res.data等
  return res
}, err => {
  console.log('failed');
})