接口那点事

# match
使用接口地址
```
创建api 文件 写上需要的 api 接口地址 如果不多最好就是写成一个文件，不用太麻烦

*** 记住要多用 console.log() ***
```

解决跨域问题办法: 运用jsonp,原生Ajax，最后就是我现在解决的办法了
一配置一个代理服务器，如下======>>

```
Step 1 ==>   (1）step1：配置 baseURL
```

可以自定义一个 js 文件，也可以直接在 main.js 中写。
【main.js】

```
import Vue from 'vue'

import App from './App.vue'

// step1：引入 axios

import Axios from 'axios'

Vue.config.productionTip = false
```

// step2：把axios挂载到vue的原型中，在vue中每个组件都可以使用axios发送请求,
// 不需要每次都 import一下 axios了，直接使用 $axios 即可

```
Vue.prototype.$axios = Axios
```

// step3：使每次请求都会带一个 /api 前缀

```
Axios.defaults.baseURL = '/api'
我的这里是===>
axios.defaults.baseURL = '/interface.sina.cn'

new Vue({
render: h => h(App),
}).$mount('#app')

```

（2）step2：修改配置文件（修改后要重启服务）
vue 3.0 通过 vue.config.js 文件 修改配置（若没有，则直接在项目路径下新建即可）。

```
【vue.config.js】

module.exports = {
 devServer: {
        proxy: {
            '/interface.sina.cn': {
                // 此处的写法，目的是为了 将 /api 替换成 https://www.baidu.com/
                target: 'https://interface.sina.cn/news/wap/fymap2020_data.d.json',
                // 允许跨域
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                    '^/interface.sina.cn': ''
                }
            }
        }
    }
}

```
    export default {
        methods: {
            testAxios() {
                // 由于 main.js 里全局定义的 axios,此处直接使用 $axios 即可。
                // 由于 main.js 里定义了每个请求前缀，此处的 / 即为 /api/，
                // 经过 vue.config.js 配置文件的代理设置，会自动转为 https://www.baidu.com/，从而解决跨域问题
                this.$axios.get('/').then(response => {
                    if (response.data) {
                        console.log(response.data)
                    }
                }).catch(err => {
                    alert('请求失败')
                })
            }
        }
    }
错误展示(当然是在我这里错误演示)
```
 // .then(res => {
                //     console.log('=========', res.data)
                //     //获取省份数据
                //     let citys = res.data
                //     console.log('我是citys', citys);
                //     // let arr= []
                //     // for (let i = 0; i < citys.length; i++) {
                //     //     let obj ={}
                //     //     obj.name=citys[i].xArea;
                //     //     obj.value=citys[i].confirm; //累计确诊人数
                //     // }
                // },
                // error =>{
                //     console.log('请求失败l',error.message)
                // }
                // )

```
数据调用问题
```
1）、有可能会遇到数据为空的问题，这时就需要检查返回的数据有没有取错了
2）、如果需要遍历数据请确保数据是否真的拿到了，可以尝试一下把获取数据的位置换一下

可以在方法在调用接口数据 在钩子函数里面
    mounted() {
        $axios.get('/').then(response => {
            let cits = response.data.data   请求到的数据
            let arr = []
            for (let i = 0; i < cits.list.length; i++) {
                let obj = {}
                obj.name = cits.list[i].name;
                obj.value = cits.list[i].value; //累计确诊人数
                arr.push(obj)
            }
            this.chinaMap(arr );  把获取的数据放进 arr里面，然后作为参数传给 chinaMap
        }).catch(err => {
            console.log('请求失败', err.message)
        })

        this.chinaMap()
    },
    methods: {
        chinaMap(data) { 传个参数给他
            const myChart = this.$echarts.init(this.$refs.main);
                  const option={...地图的属性...}
            myChart.setOption(option);
        }
    }
}

*** 在此之前要注意赋值的东西有没有数据***
```