vue中axios的安装使用

axios是一个基于 promise 的 HTTP 库，在vue中axios是比较常用的网络请求方法。

axios是通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样。
简单来说： ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装。
axios是ajax ajax不止axios。

安装

npm install axios -S

在main.js配置

import axios from 'axios'
Vue.prototype.$axios = axios

使用

 

this.$axios({
      url: "",
      method: "get",
      params: {}
    }).then(res => {
      console.log(res)
    })

 

也可以先进行封装后调用

封装

先新建一个network文件夹再建一个request.js

 

import axios from 'axios'

export function request(config) {
    return new Promise((resolve, reject) => {
        创建axios实例
        const instance = axios.create({
            baseURL: '',
        })
        // 发送网络请求
        instance(config).then(res => {
            resolve(res)
        }).catch(err => {
            reject(err)
        })
    })
}

 

简写

 

import axios from 'axios'

export function request(config) {
    // 创建axios实例
    const instance = axios.create({
        baseURL: '',
    })
    // 发送网络请求
    return instance(config)
}

 

使用：

 

import {request} from '../network/request'

request({
      url:'',
      params: {}
    }).then(res => {
      console.log(res)
    })