《10 分钟学会 Vue基础-Axios》

网络请求回顾。我们之前接触过一些，Ajax，jQuery封装过一个，基于XHR对象，我们在小程序中也接触过一个网络请求，request对象。在React中，还接触过一个Fetch对象。在Vue中，我们有与Vue配合比较好的方案：Axios，当然，在Vue最初的时候，官网维护过一个网络请求vue-resource，但是目前已经不推荐使用了。

Axios
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
Features
从浏览器中创建 XMLHttpRequests

从 node.js 创建 http 请求

支持 Promise API

拦截请求和响应

转换请求数据和响应数据

取消请求

自动转换 JSON 数据

客户端支持防御 XSRF

安装
npm install axios

bower install axios

引入使用方式
全局配置

import axios from "axios"
Vue.prototype.$axios = axios;
this.$axios.get("http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php")
    .then(res =>{
      console.log(res.data);
    })

局部使用

import axios from "axios"

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  mounted(){
    axios.get("http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php")
    .then(res =>{
      console.log(res.data);
    })
  }
}

请求方式示例

Get请求

// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 可选地，上面的请求可以这样做
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

Post请求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

参数注意事项：post请求参数需要的是字符串类型，如：name=iwen@age=20,基于此，我们需要对传递的参数做转换，通过QueryString做转换，qs.stringify({})

并发请求

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
  }));

配置的默认值/defaults
全局的 axios 默认值
axios.defaults.baseURL = ‘https://api.example.com’;

axios.defaults.headers.common[‘Authorization’] = AUTH_TOKEN;

axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’;

拦截器

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

设计原则
对于网络请求来说，不是一次性的应用，而是贯穿整个应用的。基于此，我们需要对网络请求进行封装，让我们可以更好的去调用它。而且因为网络请求非常多，所以我们在使用的时候应该对网络请求进行统一的处理和规划。

封装网络请求

统一处理网络请求

跨域处理

开发环境
我们编写代码的环境被称为开发环境

跨域解决方案：

Proxy代理
他只能解决开发环境下的跨域，上线之后，此种跨域将不再生效

解决两种场景：

1.后台开发者还没有时间处理跨域问题

2.我们自己的模拟数据服务器，例如Mock，产生了跨域

示例代码：

我们需要在项目的根目录下创建一个文件为：vue.config.js。 vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。

生产环境
打包上线之后要运行在浏览器中被用户访问的环境

npm run build：运行此命令，可以直接打包项目。

在浏览器中，能运行的代码就只有HTML、CSS和JavaScript及资源文件如：Image

跨域解决方案：

CORS后台跨域解决
实时生效，不区分开发还是生产环境

【腾讯文档】题库
（里面含有大量web前端，后端知识）