vue-cli学习-Axios 跨域和封装

vue-cli学习-Axios 跨域和封装

Axios 跨域

安装axios

npm install axios

json数据为哔哩哔哩李炎恢老师的远程json数据

https://cdn.liyanhui.com/data.json (可跨域，设置过)
https://cdn.ycku.com/data.json (不可跨域，默认)

可跨域

import axios from 'axios'

getName(){
      axios.get('https://cdn.liyanhui.com/data.json').then(res=>{
         this.name = res.data[0].username
         console.log(res.data)
       })
    }

不可跨域

创建vue.config.js文件，设置跨域代理

module.exports={
    devServer : {
        proxy : 'https://cdn.ycku.com'
    }
}

PS：注意重启项目

axios 封装

直接使用 axios，每个组件都要重复配置各种参数；
创建http/api.js，用于封装axios

import axios from "axios";

export function get(url){
    return new Promise((resolve, reject) => {
        axios.get(url).then(res=>{
            resolve(res.data)
        }).catch(err=>{
            reject(err.data)
        })
    })
}
//Ajax.vue
import {get} from '@/http/api'

    getName(){
      get('data.json').then(data =>{
        console.log(data)
        this.name = data[0].username
      })
    }