import axios from 'axios'
export function request(config) {
  // 1.創(chuàng)建axios的實例
  const instance = axios.create({
    // 設(shè)置基礎(chǔ)的url配置項，這樣接口處的url前面就不用寫url:'http://127.0.0.1:8000/api/home'，直接寫成 url:'/api/home', 就可以了
    baseURL: 'http://127.0.0.1:8000/', 
    //設(shè)置請求超時時間
    timeout: 5000 
  })
  // 2.axios的攔截器，用不到的可以忽略這節(jié)
  // 2.1.請求攔截的作用
  instance.interceptors.request.use(config => {
    return config
  }, err => {
    console.log('請求攔截err: '+err);
  })
  // 2.2.響應(yīng)攔截
  instance.interceptors.response.use(res => {
    return res.data
  }, err => {
        console.log('響應(yīng)攔截err: '+err);
  })
  // 3.發(fā)送真正的網(wǎng)絡(luò)請求
  return instance(config)
}

// 導(dǎo)入封裝好的Axios
import {request} from './request' //注意request.js的相對路徑問題
//1. get請求---獲取首頁的多個數(shù)據(jù)
export function getHomeMultidata() {
  return request({
    url:'/api/home',
    method:'get',
    // 可以帶參數(shù)也可以不帶參數(shù)
    // params: {
    //     userName: 'Lan',
    //     password: '123'
    // }
  })
}
// 2.1 post請求---傳輸json數(shù)據(jù)時，獲取電視劇多個數(shù)據(jù)
export function getTvshowMultidata() {
  return request({
    url:'/api/Tvshow',
     headers: {
      'Content-Type': 'application/json'
    },
    method:'post',
    data: {
        userName: 'Lan',
        password: '123'
     }
  })
}
//2.2 post請求---傳輸文件流,表單Form Data 數(shù)據(jù)時
export function getMovieMultidata() {
  return request({
    url:'/api/Movie',
    headers: {
    'Content-Type': 'multipart/form-data';
    },
    method:'post',
    data: {
        userName: 'Lan',
        password: '123'
     }
  })
}

import {getHomeMultidata} from "network/home/network"; //導(dǎo)入js，路徑自己根據(jù)文件位置設(shè)置

created() {
      // 在方法中調(diào)用函數(shù)即可
        getHomeMultidata().then(
          res => {
          // 此處res 為返回的數(shù)據(jù)，將返回的數(shù)據(jù)進(jìn)行處理顯示
            this.banners = res.homedata.slice(0,5)
            this.newestData = res.homedata.slice(5,12)
            
        ).catch(
          err => {
            console.log(err)
          }
        );
    },

npm install axios -s //此方法會將axios下載到package.json中的"dependencies"模塊中，大家可以自行查看

<script>
import axios from ?' axios'
</script>

export default{?
created() {
?
? ? ? //get請求 ? ?
? ? axios.get("url", {
?
? ? ? params: { //此處為get請求傳遞的參數(shù) 但是一把get請求是沒有參數(shù)的 params是固定的
? ? ? ? ? password: "123456",
? ? ? ? ?userName: "320621200305185129",
? ? ? ? },
? ? ? })
? ? ??
?
? ? ?.then(function (response) {
? ? ? ?console.log(response, 666666);
? ? ?})
? ? ?.catch(function (error) {
? ? ? ? console.log(error, 44444);
? ? ? });
? ? ??
? },
}
?
//post請求
axios.post('url', {
//此處是參數(shù)
? ? firstName: 'Fred',
? ? lastName: 'Flintstone'
? })
? .then(function (response) {
? ? console.log(response);
? })
? .catch(function (error) {
? ? console.log(error);
? });

import axios from 'axios'
export function request(config) {
? // 1.創(chuàng)建axios的實例
? const instance = axios.create({
? ? // 設(shè)置基礎(chǔ)的url配置項，這樣接口處的url前面就不用寫了
?
? ? baseURL: 'http://192.168.0.112:9518/', 基礎(chǔ)代碼
? ? //設(shè)置請求超時時間
? ? timeout: 5000?
? })
?
? // 2.axios的攔截器，用不到的可以忽略這節(jié)
? // 2.1.請求攔截的作用
? instance.interceptors.request.use(config => {
? ? return config
? }, err => {
? ? console.log('請求攔截err: '+err);
? })
?
? // 2.2.響應(yīng)攔截
? instance.interceptors.response.use(res => {
? ? return res.data
? }, err => {
? ? ? ? console.log('響應(yīng)攔截err: '+err);
? })
?
? // 3.發(fā)送真正的網(wǎng)絡(luò)請求
? return instance(config)
}

import {request} from '../utils/request'
//get請求
?
export function denglu() {
? return request({
? ? url: 'login',
? ? method: 'get',
? ? params:{ //此處為傳遞的參數(shù) //get請求一般是不傳遞參數(shù)的
? ? ? ? password:'123456',
? ? ? ? uerName:'5555555555'
? ? }
? ? // header: { // 已經(jīng)在request.js里面進(jìn)行全局設(shè)置，也可以在請求里面局部設(shè)置其他headers
? ? // ? ?'Content-Type': 'text/plain'
? ? // }
? })
}
?//post請求
export function denglu() {
? return request({
? ? url: 'login',
? ? method: 'post',
? ? data:{ //此處為傳遞的參數(shù)
? ? ? ? password:'123456',
? ? ? ? uerName:'5555555555'
? ? }
? ? // header: { // 已經(jīng)在request.js里面進(jìn)行全局設(shè)置，也可以在請求里面局部設(shè)置其他headers
? ? // ? ?'Content-Type': 'text/plain'
? ? // }
? })
}

<script>
import denglu from ?"../api/index"
</script>